为什么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？

来源

2014-10-07 Somebody

目前通过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

对不起，我之前并不完全明白这个问题。

基本上，jQuery的hide/show切换目标元素的display值none之间和它的原始值。见here。

这意味着元素从渲染树中移除并丢失其所有动画状态。当您切换回来时，您定义的动画将从最初开始应用到它。

为防止出现这种情况，您可能需要切换CSS visibility值，而不是使用jQuery的hide/show。

要实现您正在尝试执行的操作，请检查此fiddle。

来源

2014-12-08 07:19:18 Justineo

这不提供问题的答案。要批评或要求作者澄清，请在其帖子下方留言。 – Evgeniy 2014-12-08 07:49:07

更新了答案。 – Justineo 2014-12-08 08:14:42

@Justineo知名度：隐藏意味着不像display：none，标签不可见，但空间分配给页面。不是解决方案。 – momomo 2017-08-15 20:39:47

为什么CSS动画显示隐藏/阻止重置动画？

回答

相关问题