将CSS3过渡设置为无

如何使CSS过渡在媒体查询或任何其他情况下无法工作？例如：将CSS3过渡设置为无

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

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

来源

2012-08-07 shrewdbeans

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

像这样：

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

来源

2012-08-07 17:34:20

标准属性不应该在特定于供应商的属性之后持续吗？ – Daze 2013-11-22 09:49:30

这是正确的。 – 2013-11-22 09:51:26

+12

难道你不能只设置'transition：none'（加上前缀如果需要）？ – tomekwi 2015-01-26 11:06:24

transition: width 0s

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

来源

2012-08-07 15:03:29

不是一个真正的解决方案，如果你的过渡是缩放元素 – PUG 2012-12-26 03:09:06

谢谢！代码不会太长:) – 2017-02-14 08:20:19

甚至比配置过渡性质到没有是设置过渡时间到更好。

这是跨浏览器的代码：

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

这是为什么好？因为默认情况下，符合标准的浏览器（例如Firefox）会为每个元素设置转换属性至全部。他们还设置过渡期到0s。因此，通过设置转换时间段到0s，您可以最接近地匹配浏览器如何定义没有转换的元素。

设置过渡时间到默认呈现过渡性质无关。

来源

2016-12-14 10:26:04 RockPaperLizard

将CSS3过渡设置为无

回答

相关问题