CSS转换与多个属性速记?

我似乎找不到CSS转换速记与多个属性的正确语法。这没有做任何事情:

.element {
-webkit-transition: height .5s, opacity .5s .5s;
-moz-transition: height .5s, opacity .5s .5s;
-ms-transition: height .5s, opacity .5s .5s;
transition: height .5s, opacity .5s .5s;
height: 0;
opacity: 0;
overflow: 0;
}
.element.show {
height: 200px;
opacity: 1;
}

我用javascript添加了show类。元素变得更高和可见，它只是没有转换。在最新的Chrome, FF和Safari测试。

我做错了什么?

编辑:只是为了明确，我正在寻找速记版本，以缩小我的CSS。它包含了所有供应商前缀，已经足够臃肿了。还扩展了示例代码。

544929 次浏览
小开
最佳答案

语法:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

注意，如果指定了延迟，则持续时间必须在延迟之前。

在简写声明中组合的单个转换:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

或者只是转换它们:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

这是一个简单的例子。这是另一个具有延迟属性。

前面列出的编辑:是关于transition的兼容性和已知问题。为了可读性，删除了。

底线是:使用它。该特性对所有应用程序都是稳定的，目前全球兼容性远高于94%。

如果您仍然想确认，请参考http://caniuse.com/css-transitions

小开

如果你有几个特定的属性，你想要以同样的方式转换(因为你也有一些属性，你特别想要转换不，比如opacity)，另一个选择是这样做(省略前缀为简洁):

.myclass {
transition: all 200ms ease;
transition-property: box-shadow, height, width, background, font-size;
}

第二个声明覆盖了上面的简写声明中的all，并(偶尔)使代码更加简洁。

/* prefixes omitted for brevity */
.box {
height: 100px;
width: 100px;
background: red;
box-shadow: red 0 0 5px 1px;
transition: all 500ms ease;
/*note: not transitioning width */
transition-property: height, background, box-shadow;
}


.box:hover {
height: 50px;
width: 50px;
box-shadow: blue 0 0 10px 3px;
background: blue;
}
<p>Hover box for demo</p>
<div class="box"></div>

Demo

小开

通过在转换不透明属性时使用0.5 s的延迟，元素在其高度转换期间将是完全透明的(因此是不可见的)。你唯一能看到的就是不透明度的改变。所以你会得到和把height属性从过渡中去掉一样的效果:

"过渡:不透明度。5s。5s;"

这是你想要的吗?如果不是，你想看到高度的转变，你不能让不透明度在整个转变过程中为零。

小开

我认为这是可行的:

.element {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
小开

我是这样做的:

.element {
transition: height 3s ease-out, width 5s ease-in;
}
小开

这帮助我理解/简化了我所需要的动画:

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}


.base {
max-width: 0vw;
opacity: 0;


transition-property: max-width, opacity; // relative order
transition-duration: 2s, 4s; // effects relatively ordered animation properties
transition-delay: 6s; // effects delay of all animation properties
animation-timing-function: ease;


&:hover {
max-width: 100vw;
opacity: 1;


transition-duration: 5s; // effects duration of all aniomation properties
transition-delay: 2s, 7s; // effects relatively ordered animation properties
}
}

对象中的所有转换属性(duration, transition-timing-function等)都适用。的基类

小开

需要注意的一件重要的事情是CSS的transition属性本身是一个简写- 如上所述MDN Web Docs:

CSS属性transition是transition-property、transition-duration、transition-timing-function和transition-delay的缩写。

这种简写的理想用法是结合单个转换的各种组成性质。如果这被用来组合多个过渡，它将开始变得笨拙。

因此，当你在同一个元素上有超过2个不同组成属性的转换时，单独编写它们会变得更容易，而不是使用transition简写。例如:

这是一个元素上多个转换的简写版本(选项1):

transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-out, filter 0.1s ease-out, color 0.25s ease-in 0.2s;
如你所见，这变得笨拙，有点难以想象。
同样的CSS可以像这样应用(选项2):

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s, 0.2s, 0.2s, 0.25s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

当然，最终这一切都取决于您对输入和维护源代码的偏好。但我个人更喜欢第二种选择。

提示:

使用它的另一个好处是，如果一个Constituent属性对于所有转换都是相同的，则不需要多次提到它。例如，在上面的例子中，如果所有的transition-duration都是相同的(0.5s)，你可以这样写:

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

提交答案