轉換延遲屬性在更改類時不起作用

Question

我通過更改其父類（body）來動畫元素，但切換此類時似乎打破transition-delay屬性。它適用於Safari，但不適用於Chrome或Firefox。

單擊第一個列表元素時，它應該在其他列表元素消失後移動。

點擊返回時，列表元素應該返回到原來的位置，然後其他列表元素應該重新出現。但是當點擊後退按鈕時，不透明度上的transition-delay被忽略，導致它們立即出現。

我該如何解決這個問題？

$('#one').click(function() { 
 
    $("body").addClass("move"); 
 
}); 
 

 
$('#back').click(function() { 
 
    $("body").removeClass("move"); 
 
});

ul { 
 
    width: 300px; 
 
    height: 150px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
ul li { 
 
    height: 50px; 
 
    display: block; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: lightgreen; 
 
    transition: 500ms transform ease-in-out, 500ms opacity linear; 
 
    opacity: 1; 
 
    transition-delay: 0, 500ms; 
 
} 
 
body.move ul li#one { 
 
    transform: translateY(-100vh) translateY(150px); 
 
    transition: 500ms transform ease-in-out; 
 
    transition-delay: 500ms; 
 
    opacity: 1; 
 
} 
 
body.move ul li { 
 
    opacity: 0; 
 
    transition: 500ms opacity linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="one">One</li> 
 
    <li id="two">Two</li> 
 
    <li id="three">Three</li> 
 
</ul> 
 
<a id="back">Back</a>

https://jsfiddle.net/m3e7sm8k/5/

Answer 1

取而代之的是：

transition-delay: 0, 500ms; 

使用此：

transition-delay: 0s, 500ms; 

0作爲一個單位時間值，顯然在某些瀏覽器中不起作用。規範中的transition-delay定義沒有明確禁止無單位值，但似乎暗示了一致使用0s。無論如何，我會避免無單位時間值是安全的。

規格號：2.4. The transition-delay Property