使用过渡延迟的错误

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

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

transition在这种情况下是简写属性

我可以用margin

来解释

所以保证金是上边距，右上边距，下边距和左上边距的简写

如果可以的话

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

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

在您的情况下，transition覆盖了transition-delay

您也可以在https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases上阅读有关此内容的信息。见案例号1

Answer 2

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

您需要指定属性和时间