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

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

1 个答案: