利用CSS3的transition属性实现滑动效果

CSS代码

1. .slider {   
2.     overflow-y: hidden;   
3.     max-height: 500px;   
4.       
5.     background: pink;   
6.     height: 200px;   
7.     width: 200px;   
8.       
9.     -webkit-transition-property: all;   
10.     -webkit-transition-duration: .5s;   
11.     -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   
12.       
13.     -moz-transition-property: all;   
14.     -moz-transition-duration: .5s;   
15.     -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   
16.       
17.     -o-transition-property: all;   
18.     -o-transition-duration: .5s;   
19.     -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   
20.       
21.     -ms-transition-property: all;   
22.     -ms-transition-duration: .5s;   
23.     -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   
24. }   
25. .slider.closed {   
26.     max-height: 0;   
27. }  

demo演示地址:http://www.zjgsq.com/example?pid=1166