web-dev-qa-db-ja.com

css3スライドアップスライドダウン

非表示のときに上下/左右にスライドするように、CSSトランジションを使用して要素のスタイルを設定するにはどうすればよいですか？

.hideUp {
  transition: .5s;
  display:none;
}
.hideLeft {
  transition: .5s;
  display:none;
}

クラスを要素に追加し、左にスライドさせて非表示にします。ありがとう！

csscss-transitions
13
Harry

トランジションでdisplay：noneを使用することはできません。これにより、トランジションはアニメートせずに、ある状態から別の状態にジャンプします。

このフィドルは、topを使用して要素を移動します。アニメートします。 http://jsfiddle.net/R8zca/4/

このフィドルはdisplay：noneを使用します。アニメートしません。 http://jsfiddle.net/R8zca/5/

非表示の要素をアニメーション化する場合は、zインデックス、不透明度、位置、または可視性を使用できます。アニメート可能なプロパティのリストは次のとおりです。 http://www.w3.org/TR/css3-transitions/#animatable-properties-

13
DuMaurier

複数のブラウザ固有のプロパティ（moz-transition、webkit-transition ...）を使用する必要があります

それらの使用方法の良い説明はそこにあります： https://developer.mozilla.org/en/CSS/CSS_transitions

あなたの場合、それは次のようなものになります

.showUp {
  transition:height .5s;
  height:50px;
  overflow:hidden;
}
.showLeft {
   transition:width .5s;
   width:0px
   overflow:hidden;
}
.showUp.hideUp {
  height:0px
}
.showLeft.hideLeft {
   width:50px
}

そして、hideUpクラスとhideLeftクラスを切り替えて遷移を実行します。

2
Py.

コンテンツスライディングデモを含む次の記事を確認することをお勧めします。

CSS3トランジション、変換、アニメーションの使用

2
Arnaud Leymet