當顯示屬性更改時，如何防止重新運行CSS動畫？

Question

給定一個具有更改opacity的CSS動畫的元素，爲什麼當display屬性更改時動畫會重新運行？我如何阻止這種情況發生？

示例代碼：

HTML

<div class="foo"></div> 

CSS

@-webkit-keyframes fade-in { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
.foo { 
    background-color: red; 
    width: 200px; 
    height: 200px; 
    -webkit-animation: fade-in 600ms forwards 0ms ease; 
} 

.hidden { 
    display: none; 
} 

JS

$(function() { 
    $(".btn").click(function (e) { 
     e.preventDefault(); 
     $(".foo").toggleClass("hidden") 
    }) 
}) 

JSFiddle

我期望看到的行爲是動畫在DOM呈現時運行，但在顯示屬性發生更改時不會重新運行。

Answer 1

一種方法是在點擊按鈕以覆蓋動畫屬性時添加一個類。

FIDDLE

$(function() { 
    $(".btn").click(function (e) { 
     e.preventDefault(); 
     $(".foo").addClass('finished').toggleClass("hidden") 
    }) 
}) 

.foo.finished { 
    -webkit-animation: none; 
} 

---

另一種選擇是用position: relative隱藏它，而不是改變display：

FIDDLE

.hidden { 
    position: absolute; 
    left: -99999px; 
} 

Answer 2

這是你如何做到這一點..它有點哈克，但你可以刪除該類，並添加另一個沒有動畫的類。 $("#my_foo").removeClass("foo").addClass("your_foo");

http://jsfiddle.net/s68yf/6/

Answer 3

好奇。看起來Chrome的行爲好像從display: none改爲block與將元素添加到DOM相同。我在Firefox（jsfiddle）中試過，它的工作原理與預期一樣。但是，IE和Chrome一樣。有人可能認爲Firefox的行爲是正確的，但考慮到這一點，display: none就像是從佈局和渲染樹中獲取節點，因此，如果頁面加載的對象爲display: none，然後它變爲block，我會期待看到動畫。

@keyframes fade-in { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
.foo { 
    background-color: red; 
    width: 200px; 
    height: 200px; 
    animation: fade-in 3000ms forwards 0ms ease; 
} 

.hidden { 
    display: none; 
}