为什么CSS动画显示隐藏/阻止重置动画?
问题描述:
HTML:为什么CSS动画显示隐藏/阻止重置动画?
<div id="parent">
<div id="anim_div">:D</div>
</div>
的jQuery:
$('#anim_div').addClass('animation');
setTimeout(function(){
$('#parent').hide();
},1000);
setTimeout(function(){
$('#parent').show();
},2000);
CSS:
#parent {
width:400px;
height:150px;
border-right:1px solid red;
}
#anim_div {
position:absolute;
}
.animation {
-webkit-animation:anim 4s;
}
@-webkit-keyframes anim {
0% {
left:0px;
}
100% {
left:400px;
}
}
演示: http://jsfiddle.net/o7bt7p3a/
有没有什么办法阻止动画重复/隐藏后复位显示父母eleme nt via css only?
目前通过setTimeout删除动画类,但它有点丑...这些转换事件也不是一个解决方案。 :\太痛苦...... D – Somebody 2014-10-07 12:55:23
未测试,但如果您使用“不透明度”或“能见度”而不是显示/隐藏会发生什么?涉及他们的解决方案是否可接说一些像[this](http://jsfiddle.net/hari_shanx/o7bt7p3a/1/)。 – Harry 2014-10-07 12:56:43
猜测这是唯一的解决方案,如果没有其他解决方案。 :\因此,必须编辑旧代码。 :D – Somebody 2014-10-07 13:00:14