【问题标题】:Disable/turn off inherited CSS3 transitions禁用/关闭继承的 CSS3 过渡
【发布时间】:2011-10-01 20:16:45
【问题描述】:

所以我在一个元素上附加了以下 CSS 过渡:

a { 
  -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;  
  -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
  -o-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
  transition:color 0.1s ease-in, background-color 0.1s ease-in; 
}

有没有办法在特定元素上禁用这些继承的过渡?

a.tags { transition: none; } 

似乎没有做这项工作。

【问题讨论】:

    标签: css css-transitions


    【解决方案1】:

    鉴于以下 HTML,似乎支持使用 transition: none(对 Opera 进行了特定调整):

    <a href="#" class="transition">Content</a>
    <a href="#" class="transition">Content</a>
    <a href="#" class="noTransition">Content</a>
    <a href="#" class="transition">Content</a>
    

    ...和 ​​CSS:

    a {
        color: #f90;
        -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
        -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
        -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
        transition:color 0.8s ease-in, background-color 0.1s ease-in; 
    }
    a:hover {
        color: #f00;
        -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
        -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
        -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
        transition:color 0.8s ease-in, background-color 0.1s ease-in; 
    }
    a.noTransition {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }
    

    JS Fiddle demo.

    在 Ubuntu 11.04 上使用 Chromium 12、Opera 11.x 和 Firefox 5 进行测试。

    对 Opera 的具体适配是使用-o-transition: color 0 ease-in;,它的目标与其他transition 规则中指定的属性相同,但将转换时间设置为0,这有效地防止了转换被注意到。使用a.noTransition 选择器只是为没有过渡的元素提供特定的选择器。


    编辑注意@Frédéric Hamidi's answer,使用all(至少对于Opera)比列出您不想进行转换的每个单独的属性名称要简洁得多.

    Updated JS Fiddle demo, showing the use of all in Opera: -o-transition: all 0 none,自删除@Frédéric的回答后。

    【讨论】:

    • 啊,我需要在转换之前添加浏览器特定的标签。邪恶的,干杯!
    • 感谢歌剧没有过渡信息。
    • Opera 有这个区别真的很无聊
    • 为什么你不能这样做:transition:color none, background-color 0.1s ease-in;
    【解决方案2】:

    如果你想禁用单个过渡属性,你可以这样做:

    transition: color 0s;
    

    (因为零秒转换与无转换相同。)

    【讨论】:

    • 性能坚持者可能会受到冒犯,但禁用单个属性似乎是合法的。
    • 它现在在 Chrome 中对我不起作用。这只会禁用所有继承的转换。
    • 你能举个例子@Inversion
    • @WillMadden,这里jsfiddle.net/312bu8po 尝试初始状态,然后取消注释 css 中准备好的行——left 的转换将被删除。
    【解决方案3】:

    您还可以取消继承包含元素内的所有转换:

    CSS:

    .noTrans *{
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
    }
    

    HTML:

    <a href="#">Content</a>
    <a href="#">Content</a>
    <div class="noTrans">
    <a href="#">Content</a>
    </div>
    <a href="#">Content</a>
    

    【讨论】:

    • 嗯,我可能不建议这样做。该规则不适用于您应用该类的元素,仅适用于子元素,它适用于 每个 子元素,即使是不需要应用规则的子元素,这可能会导致特异性和进一步的可扩展性问题。
    • 最近对我来说这是一个非常有用的解决方案,可以从 Google 地图元素中全局删除过渡,这会增加地图行为的怪异。
    【解决方案4】:

    删除所有转换的另一种方法是使用 unset 关键字:

    a.tags {
        transition: unset;
    }
    

    transition 属性一起使用时,unset 等效于initial,因为transition 不是继承属性:

    a.tags {
        transition: initial;
    }
    

    了解unsetinitial 的读者可以立即知道这些解决方案是正确的,而无需考虑transition 的具体语法。

    【讨论】:

    【解决方案5】:

    基于 W3schools 的默认过渡值为:all 0s ease 0s,这应该是禁用过渡的跨浏览器兼容方式。

    这是一个链接:https://www.w3schools.com/cssref/css3_pr_transition.asp

    【讨论】:

      【解决方案6】:

      此外,还可以通过设置属性transition-property: width, height; 来设置将要转换的属性列表,更多详细信息here

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2023-04-01
        • 1970-01-01
        • 2011-11-04
        • 1970-01-01
        • 2014-08-16
        • 2013-02-13
        • 2012-03-26
        • 1970-01-01
        相关资源
        最近更新 更多