html - 如何最好地将 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

将transition-duration设置为0s比将transition-property设置为none更好。

这是跨浏览器的代码：

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

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

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

Answer 3

transition: width 0s

应该做的伎俩 - 因为它基本上是说有一个过渡，但 0s 太快了，看不到它！