使用转换延迟的错误

Question

我之前被一些代码绊倒了，发现它是基于转换延迟不适用于转换的，如果它的属性是在转换本身之前设置的。我想知道这是错误还是预期的行为。

我做了一个小笔来展示我的意思的例子：https://codepen.io/itsharryfrancis/pen/pGBRBR

它本质上显示了以下两者之间的区别：

.test1 {
  .block {
    transition: background 1s;
    transition-delay: 1s;
  }
}

和

.test2 {
  .block {
    transition-delay: 1s;
    transition: background 1s;
  }
}

我猜这是否是预期的，这是由于 CSS 的级联性质？

Answer 1

  .block {
    transition-delay: 1s;
    transition-property: background;
    transition-duration: 1s;
  }

你需要指定属性和时间

Answer 2

所以您遇到的是 shorthand 属性的一个已知问题。

transition 在这种情况下是 shorthand 属性

我可以用margin

的案例来解释

所以边距是 shorthand margin-top, margin-right, margin-bottom 和 margin-left

所以如果你这样做

margin-top: 20px;
margin : 10px;

margin 属性实际上会覆盖 margin-top;

在你的情况下 transition 优先于 transition-delay

Bug using transition-delay