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

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