css - 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; }

现在，当信息栏显示时，它会显示动画，而当它隐藏时，动画不会显示。