css - 使用转换延迟的错误

Question

我之前遇到过一些代码，发现它是基于 transition-delay 而不是应用于转换，如果它的属性是在转换本身之前设置的。我想知道这是错误还是预期的行为。

我做了一支小笔来展示我的意思的例子: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

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

transition 在这种情况下是一个速记属性

我可以用 margin 的情况来解释

所以margin是margin-top、margin-right、margin-bottom和margin-left的简写

所以如果你这样做

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

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

在你的例子中，transition 覆盖了 transition-delay

你也可以在 mdn 上阅读 https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases .见案例编号1