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

Теперь, когда отображается информационная панель, она отображается с анимацией, а когда скрывается, анимация не отображается.