爲什麼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動畫顯示隱藏/阻止重置動畫？

回答

相關問題