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

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。transition-delay属性