如何最好地将 CSS3 过渡设置为无

Question

我该如何使CSS过渡在媒体查询中或任何其他情况下不起作用？例如：

@media (min-width: 200px) {
    element {
        transition: width 1s;
    }   
}
@media (min-width: 600px) {
    element {
        transition: none; // SET TO NO TRANSITION
    }   
}

Answer 1

可以将转换属性设置为 none。这样，就不会应用过渡效果。

喜欢这个：

-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;

Answer 2

比将过渡属性设置为无更好的是将过渡持续时间设置为 0s。

这是跨浏览器代码：

-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;

为什么这样更好？ 因为，默认情况下，符合标准的浏览器（如 Firefox）为每个元素设置 transition-property to all。 它们还将过渡持续时间设置为 0s。 因此，通过将过渡持续时间设置为 0s，您可以最接近浏览器定义没有过渡的元素的方式。

将过渡持续时间设置为默认值 0 会使过渡属性无关紧要。

Answer 3

transition: width 0s

应该做这个技巧 - 因为它基本上是说有一个过渡，但 0 太快看到它了！