我似乎找不到具有多个属性的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的简写版本。使用所有供应商前缀已经足够enough肿。还扩展了示例代码。
2
查看此文档。developer.mozilla.org/en/CSS/CSS_transitions
—
交响曲
您实际上是否更改了高度和不透明度的值?否则,它们不会改变
—
yunzen 2012
我不太熟悉CSS转换- 打算使用double
—
BoltClock
.5s
值opacity
吗?
该文档未提供使用具有多个属性的速记版本的示例。高度从0变为200像素,不透明度从0变为1。第二个.5s是不透明度过渡的延迟。我想一个元素的高度增长,以及时完成,褪色进去。
—
格雷戈里Bolkenstijn
嗯,是延迟值。
—
BoltClock