css3 slideup slide down

Question

如何使用css轉換來設置元素的樣式，以便隱藏時可以向上/向下/向左/向右滑動？

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

我想將該類添加到一個元素並讓它向左滑動並消失。謝謝！

Answer 1

您不能使用display：none和transitions。這將導致過渡只是從一個狀態跳到另一個狀態，而沒有動畫。

這個小提琴使用top來移動元素。它動畫。 http://jsfiddle.net/R8zca/4/

這個小提琴使用display：none。它不生動。 http://jsfiddle.net/R8zca/5/

如果要爲隱藏元素設置動畫效果，可以使用z-index，opacity，position或visibilty。以下是動畫屬性列表：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類進行轉換。