CSS3 过渡：禁用还原动画

Question

我正在设置此样式以在元素高度变化时显示动画从 0 到 30：

.information-bar { height: 30px; }
.information-bar-collapsed { height: 0; }
.information-bar { background-color: #f9e288; -moz-transition: height 0.3s ease; -webkit-transition: height 0.3s ease; }

但当元素高度从 30 变为 0 时，它也会显示动画。如何避免第二个动画？

谢谢。

Answer 1

通过添加这个样式解决：

.information-bar-collapsed { -moz-transition: all 0s ease; -webkit-transition: all 0s ease; }

现在信息栏显示时显示动画，隐藏时不显示动画。