我似乎找不到具有多个属性的CSS转换 shorthand 的正确语法 . 这没有做任何事情:
.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 . 所有供应商前缀都足够臃肿 . 还扩展了示例代码 .
6 回答
CSS转换使用速记转换属性进行控制 . 这是配置转换的最佳方法,因为它可以更容易地避免参数列表的长度不同步,这可能非常令人沮丧,因为必须花费大量时间来调试CSS .
您可以使用以下子属性控制转换的各个组件:
过渡 property
过渡期 - 持续时间
transition-timing-function
过渡延迟
简写CSS语法编写如下:
div { transition: <property> <duration> <timing-function> <delay>; }
注意:Transition -delay是一个可选属性 .
我用这个:
通过在转换不透明度属性时延迟.5s,元素在其高度转换的整个时间内将是完全透明的(因此是不可见的) . 所以你唯一能看到的就是不透明度的变化 . 因此,您将获得与将高度属性保留在转换之外相同的效果:
“过渡:不透明度.5s .5s;”
那是你想要的吗?如果没有,并且您想要查看高度转换,则在转换的整个过程中不能具有零不透明度 .
如果你想要以相同的方式转换几个特定的属性(因为你也有一些特别不希望转换的属性,比如
opacity
),另一个选择就是做这样的事情(为简洁起见省略了前缀):第二个声明覆盖了它上面的简写声明中的
all
,并使(偶尔)更简洁的代码 .Demo
句法:
请注意,如果指定了后者,则持续时间必须在延迟之前 .
个人转换结合在速记声明中:
或者只是将它们全部转换:
这是a straightforward example . 这是另一个with the delay property .
此前列出的 Edit: 是关于
transition
的兼容性和已知问题 . 删除以方便阅读 .底线:只需使用它 . 对于所有应用程序,此属性的性质不会中断,并且全球的兼容性现在远高于94% .
如果您仍想确定,请参阅http://caniuse.com/css-transitions
我认为这个工作: