css3 slayt aşağı kaydırın

Question

Bir ögeyi css geçişleri ile nasıl gizlerim, böylece gizlendiğinde yukarı/aşağı/sola/sağa kayabilirler?

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

Sınıfı bir öğeye eklemek ve sola kaydırmak ve kaybolmak istiyorum. Teşekkürler!

Answer 1

Ekranı kullanamazsınız: hiç geçiş yok. Bu geçiş, bir durumdan diğerine, hareket etmeden diğerine atlamak için neden olacaktır.

Bu keman, öğeyi taşımak için üstte kullanılır. Animasyon yapıyor. http://jsfiddle.net/R8zca/4/

Bu keman, aşağıdakileri kullanır: yok. Bu animasyon değil. http://jsfiddle.net/R8zca/5/

Bir öğeyi gizlemek istiyorsanız, z dizini, opaklık, konum veya görünürlük kullanabilirsiniz. Görüntülenebilir özelliklerin listesi: http://www.w3.org/TR/css3-transitions/#animatable-properties-

Answer 2

İçerik sürgülü gösterilerin bulunduğu şu makaleye kontrol etmek istiyorum edilebilir:

Using CSS3 Transitions, Transforms and Animation

Answer 3

Birden tarayıcı özgü özelliği kullanmak gerekecektir (Moz-geçiş, webkit-geçiş ...)

bunların nasıl kullanılacağı iyi bir açıklaması vardır:gibi bir şey olacak dava için 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 
} 

Ayrıca geçiş yapmak için HideUp ve hideLeft sınıflarını da değiştirebilirsiniz.