CSS SlideIn動畫沒有設置高度

Question

我想用CSS複製jQuery slideIn和slideOut。

ul { 
    background-color:yellow; 
    transform-origin: top; 
    transition: transform .5s; 
} 

.slider { 
    transform: scaleY(0); 
} 

.slider類將強制UL元素調整大小。但是我的方法沒有考慮到身高。我希望高度調整爲0，這樣我的示例中的按鈕就會向上移動。

這裏是一個JSBIN：http://jsbin.com/zoqiciwicu/1/edit

通過CSS這甚至可能嗎？我沒有一個可以使用的高度。

Answer 1

由於元素而變化的height，一個可能的選項可以是具有高值設置max-height屬性來代替，並且爲了使用transition實現動畫：

Updated Example

ul { 
    background-color:yellow; 
    transform-origin: top; 
    transition: all .5s ease-in-out; 
    max-height: 50em; 
} 

.slider { 
    transform: scaleY(0); 
    max-height: 0; 
} 

Preview：

$('input').click(function(){ 
 
    $('ul').toggleClass("slider"); 
 
});

ul { 
 
    background-color:yellow; 
 
    transform-origin: top; 
 
    transition: all .5s ease-in-out; 
 
    max-height: 50em; 
 
} 
 

 
.slider { 
 
    transform: scaleY(0); 
 
    max-height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
    <li>test</li> 
 
</ul>  
 
<input type="button" value="slide">