Question

我如何制作它以便CSS转换在媒体查询或任何其他情况下不起作用？例如：

@media (min-width: 200px) {
    element {
        transition: width 1s;
    }   
}

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

Answer 1

您可以将过渡属性设置为无。这样，不会应用过渡效果。

像这样：

-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 设置为 all 。他们还将转换持续时间设置为 0s 。因此，通过将转换持续时间设置为 0s ，您最接近地匹配浏览器如何定义没有转换的元素。

将转换持续时间设置为默认 0s 会使转换属性无效。

Answer 3

transition: width 0s

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

将CSS3过渡设置为none

3 个答案: