我似乎找不到具有多个属性的CSS transition 速记的正确语法。这不会做任何事情:
.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。它已经足够臃肿了,所有的供应商前缀。还扩展了示例代码。
发布于 2012-03-12 23:51:31
语法:
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;
这是a straightforward example。这是另一个with the delay property。
编辑:之前在这里列出了有关transition
的兼容性和已知问题。删除以提高可读性。
底线:使用它就行了。此属性的性质对所有应用程序都是不间断的,并且全球兼容性现在远高于94%。
如果您仍然想要确定,请参阅http://caniuse.com/css-transitions
发布于 2013-06-15 06:09:19
如果您有几个特定的属性要以相同的方式转换(因为您还有一些特别不想转换的属性,比如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>
发布于 2018-04-19 19:45:04
我用下面的代码让它工作:
.element {
transition: height 3s ease-out, width 5s ease-in;
}
https://stackoverflow.com/questions/9670075
复制相似问题