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に変化したときのアニメーションも表示されます。2番目のアニメーションを回避するにはどうすればよいですか？

ありがとう。

Answer 1

このスタイルを追加することで解決しました：

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

これで、情報バーが表示されているときはアニメーション付きで表示され、非表示のときはアニメーションが表示されません。