[英]Bug using transition-delay
I got snagged on some code earlier and found it was based on transition-delay not applying to a transition if its property was set before the transition itself.我之前在一些代码上遇到过,发现它基于转换延迟,如果它的属性是在转换本身之前设置的,则不适用于转换。 I was wondering if this is a bug or expected behaviour.我想知道这是一个错误还是预期的行为。
I've made a little pen to show an example of what I mean: https://codepen.io/itsharryfrancis/pen/pGBRBR我做了一个小笔来展示我的意思的例子: https : //codepen.io/itsharryfrancis/pen/pGBRBR
It's essentially shows the difference between:它基本上显示了以下之间的区别:
.test1 {
.block {
transition: background 1s;
transition-delay: 1s;
}
}
and和
.test2 {
.block {
transition-delay: 1s;
transition: background 1s;
}
}
I'm guessing if it is expected it's due to the cascade nature of CSS?我猜这是由于 CSS 的级联性质吗?
so what you have faced is a known issue with shorthand properties.所以你所面临的是速记属性的一个已知问题。
transition
in this case is a shorthand property在这种情况下transition
是一个速记属性
i can explain with case of margin
我可以用margin
情况解释
so margin is shorthand for margin-top, margin-right, margin-bottom and margin-left所以 margin 是 margin-top, margin-right, margin-bottom 和 margin-left 的简写
so if you do所以如果你这样做
margin-top: 20px;
margin : 10px;
margin property will actually override the margin-top; margin 属性实际上会覆盖 margin-top;
in your case transition
is overriding transition-delay
在您的情况下, transition
是覆盖transition-delay
you can read about this on mdn also https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases .你也可以在 mdn 上阅读https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases 。 see case no.见案例号1 1
.block {
transition-delay: 1s;
transition-property: background;
transition-duration: 1s;
}
you need to specify the property and the time您需要指定属性和时间
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.