转换延迟属性在更改类时不起作用

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