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

Posted 2023-03-06

【中文标题】如何最好地将 CSS3 过渡设置为无？

【英文标题】：How to best set a CSS3 transition to none?

【发布时间】：2012-08-04 15:06:23

【问题描述】：

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

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


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

【参考方案1】：

将 transition-duration 设置为 0s 甚至比将 transition-property 设置为 none 更好。。 p>

这是跨浏览器代码：

-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，您可以最接近地匹配浏览器定义没有过渡的元素的方式。

将 transition-duration 设置为默认 0s 会使 transition-property 变得无关紧要。

【参考方案2】：

您可以将 transition-property 设置为 none。这样，将不会应用任何过渡效果。

像这样：

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

【讨论】：

你不能设置transition: none（如果需要，加上前缀）？

transition: unset 怎么样？这不是类似于将属性标记为无吗？

@tomekwi 你可以，但这是一个 速记属性 必须由解释器扩展。设置transition-property 不需要那种浪费的扩展。

【参考方案3】：

transition: width 0s

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

【讨论】：

不是真正的解决方案，如果您的过渡正在缩放元素