css3スライドアップスライドを下に

Question

cssトランジションで要素をスタイルすると、非表示のときに上下にスライドするようになりますか？

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

クラスに要素を追加し、それを左にスライドさせて消滅させたいと考えています。ありがとう！

Answer 1

トランジションでdisplay：noneを使用することはできません。それは、アニメーション化せずに遷移を一方の状態から他方の状態にジャンプさせるだけです。

このフィドルでは、上部を使用して要素を移動します。それはアニメ化する。 http://jsfiddle.net/R8zca/4/

このフィドルでは、表示：なしを使用しています。アニメーション化されません。 http://jsfiddle.net/R8zca/5/

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

Answer 2

あなたがコンテンツスライドデモが含まれている次の記事を確認したいことがあります。

Using CSS3 Transitions, Transforms and Animation

Answer 3

あなたが複数のブラウザ固有のプロパティを使用する必要があります（MOZ-移行、WebKitの遷移...）

それらを使用する方法の良い説明があります：のようなものになるでしょうあなたのケースのための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クラスを切り替えます。