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

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和原始值之间切换。看这里。

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

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

要实现您想要做的事情，请检查此小提琴。