禁用单一样式的 CSS 过渡？答案

【问题标题】：Disable CSS transitions for a single style?禁用单一样式的 CSS 过渡？
【发布时间】：2013-08-16 19:05:37
【问题描述】：

为单个样式启用 CSS 过渡非常容易，但是否可以为单个样式禁用它们？

单一样式过渡的常用方法是：

div
{
    transition: opacity 0.5s;
}

但我想做的是设置一个全局转换，然后为单个属性禁用它。也许是这样的？

div
{
    transition: 0.5s opacity 0s;
}

这有可能吗？

编辑我不想禁用一个元素的所有转换，我想禁用一个元素的一个转换。即我希望所有属性都过渡，除了不透明度。

这里有一个小提琴来演示：http://jsfiddle.net/jakelauer/QSJXV/

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

您似乎可以通过为该属性设置一个非常短的过渡持续时间来模拟所需的行为 (see fiddle)：

transition: all 3s ease, background-color .01s linear;

【讨论】：

【解决方案2】：

我解决了这个问题。此处示例：http://jsfiddle.net/jakelauer/QSJXV/1/

它完全按照我的想法工作，只是我少了一个逗号。正确的代码示例：

transition: 0.5s, opacity 0s;
-webkit-transition: 0.5s, opacity 0s;

【讨论】：

零持续时间似乎在 Fx 23 (Win 7) 中不起作用。但是像 .01s 这样的小但非零值似乎可以解决问题。我想这可能与dom.min_timeout_value（见MDN）有关。

【解决方案3】：

您可以使用 :not 伪选择器来排除那些您用不应具有转换的类标记的元素。

div {
  opacity: 1.0;
  ...
  -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
          transition: all 0.5s;
}

// Change state for example
div:hover:not(.disable-transition) {
  opacity: 0.5;
}

.disable-transition {
   // Manually maintain the opacity so there is no change
   opacity: 1.0;
}

【讨论】：

欢迎！ OP 想要禁用单个 CSS 属性的转换（仍然是相同的 HTML 元素）
啊，我明白了...您能否修改此答案以包含您想要的转换。我不相信有一种方法可以选择性地禁用转换中的特定属性。
假设我想在除一个之外的所有属性上进行转换。我也不认为有办法，但这就是我问的原因。
看看编辑是否对你有意义...我想我理解了。
其实我刚刚解决了。看我的回答stackoverflow.com/a/18238807/331043