如何指定CSS3过渡到所有属性，但有一个异常/覆盖？ [英] How can I specify a CSS3 transition to all properties, but with one exception/override?

问题描述

我在元素上设置了CSS转换，所有属性都受到影响。我不知道提前的时间，CSS属性将改变，所以我别无选择，只能使用所有，尽管性能问题。

I have a CSS transition set up on an element, with all properties being affected. I don't know ahead of time which CSS properties will change, so I have no choice but to use "all" despite the performance issues.

.a {
    transition: all 0.5s ease-in-out;
}

但是，我想要一个特定的属性，其他属性：

However, I want a specific property to have its own transition settings different from every other property:

.a {
    transition: all 0.5s ease-in-out, margin-top 5s linear;
}

根据 transition属性的W3C语法，在指定all之后应允许其他值。

According to the W3C grammar for transition-property, other values should be allowed after 'all' is specified.

但是，这似乎不工作在Firefox（18）和Opera（12）。它在Chrome / Safari（带前缀）和IE10中正常工作。

However, this doesn't seem to work in Firefox (18) and Opera (12). It works correctly in Chrome/Safari (with prefix) and IE10.

这里是一个小提琴演示的行为： http://jsfiddle.net/F7tb5/3/

Here's a fiddle demonstrating the behavior: http://jsfiddle.net/F7tb5/3/

有办法让这项工作

推荐答案

这是Firefox中的一个错误： https://bugzilla.mozilla.org/show_bug.cgi?id=835007 （类似问题： 14533519 ，但最近修正为Firefox 21里程碑。在此之前，您不能使用 all code>作为多个转换的一部分，并且必须分别指定每个属性。

That is a bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=835007 (similar question: 14533519 but was recently fixed for the Firefox 21 milestone. Until then, you can't use all as part of multiple transitions and have to specify every property separately.

为了公平起见，只有最新的W3C草案明确说明了这种行为; 早期版本不太清楚应该如何处理这种情况。

To be fair though, only the most recent W3C draft explicitly states this behaviour; earlier versions were not very clear how this case should be handled.

我有一个类似的情况，解决方法是创建一个包装器元素，动画所有属性之前已知，并留下 all 的实际元素：

I had a similar case and the work-around was to create a wrapper element that animates all properties that are known before and leave all for the actual elements:

.wrap.a {
  transition: margin-top 5s linear;
}

.wrap.a .inner {
  transition: all 0.5s ease-in-out;
}

这篇关于如何指定CSS3过渡到所有属性，但有一个异常/覆盖？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！