87,992
社区成员
发帖
与我相关
我的任务
分享关于播放隐藏属性的动画
我将一个动画div设置成隐藏属性，当点击带有显示效果的函数按钮，该div可以正常播放出来。
但是我将一个img同样处理，就怎么也不能播放。
在此简单的贴出核心代码：
function 函数名()
{
document.getElementById("id名").style.display="";
}
div
{
设置一个长方形及动画参数;
}
@keyframes 动画名
{动画过程;
}
<body>
<div id="id名" style="display: none"></div>
<a href="javascript:void(0)" onclick="函数名()">点击播放</a>
</body>
这段代码执行正常，div被正常播放。
现在将div改成了img，就不能播放了，点击没有任何效果。
function 函数名()
{
document.getElementById("id名").style.display="";
}
img#id名
{
设置图片位置及动画参数;
}
@keyframes 动画名
{动画过程;
}
<body>
<img id="id名" src="图片地址" style="display: none"></img>
<a href="javascript:void(0)" onclick="函数名()">点击播放</a>
</body>
</html>
这样就无论如何都播放不了。
PS：动画在非隐藏模式下直接播放正常，我做过这样的测试：直接在img{}里写display: none，不在body的<img>标签里写，如下：
img#id名
{
display: none;
设置图片位置及动画参数;
}
<body>
<img id="id名" src="图片地址" ></img>
</body>
这样就完全避免了代码打错引起的播放不能，因为我只用将none改成"" ，动画就能自动播放，一旦换成none，img实现隐藏，但是点击函数却不能播放。
但是我将一个img同样处理，就怎么也不能播放。
在此简单的贴出核心代码：
function 函数名()
{
document.getElementById("id名").style.display="";
}
div
{
设置一个长方形及动画参数;
}
@keyframes 动画名
{动画过程;
}
<body>
<div id="id名" style="display: none"></div>
<a href="javascript:void(0)" onclick="函数名()">点击播放</a>
</body>
这段代码执行正常，div被正常播放。
现在将div改成了img，就不能播放了，点击没有任何效果。
function 函数名()
{
document.getElementById("id名").style.display="";
}
img#id名
{
设置图片位置及动画参数;
}
@keyframes 动画名
{动画过程;
}
<body>
<img id="id名" src="图片地址" style="display: none"></img>
<a href="javascript:void(0)" onclick="函数名()">点击播放</a>
</body>
</html>
这样就无论如何都播放不了。
PS：动画在非隐藏模式下直接播放正常，我做过这样的测试：直接在img{}里写display: none，不在body的<img>标签里写，如下：
img#id名
{
display: none;
设置图片位置及动画参数;
}
<body>
<img id="id名" src="图片地址" ></img>
</body>
这样就完全避免了代码打错引起的播放不能，因为我只用将none改成"" ，动画就能自动播放，一旦换成none，img实现隐藏，但是点击函数却不能播放。
...全文
请发表友善的回复…
发表回复
humandeng 2016-02-16
- 打赏
- 举报
自己已经解决了。让这帖沉了吧。
