将CSS3过渡设置为none

Question

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

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

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

Answer 1

您可以将transition-property设置为none.这样,不会应用过渡效果.

像这样:

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

Answer 2

将过渡持续时间设置为0s甚至比将过渡属性设置为none更好。

这是跨浏览器的代码：

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

为什么这样更好？因为默认情况下，因为符合标准的浏览器（例如Firefox）将每个元素的过渡属性设置为全部。他们还将过渡持续时间设置为0s。因此，通过将transition-duration设置为0s，您可以最紧密地匹配浏览器如何定义没有过渡的元素。

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