Question

HTML：

<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/

隐藏动画后是否有任何方法可以停止动画重复/重置？仅通过css显示父元素？

Answer 1

抱歉，我之前不太了解这个问题。

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

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

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

要实现您的目标，请查看此fiddle。

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

1 个答案: