如何利用CSS3的transition属性实现滑动效果(CSS3,transition,web开发)

首先援引一下w3school上的transition基本知识：

定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property
transition-duration
transition-timing-function
transition-delay
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

语法

CSS Code复制内容到剪贴板

1. transition:propertydurationtiming-functiondelay;

实现滑动效果
只需要一个DIV元素便可实现滑动效果，避免了使用JavaScript为元素的动画（IE浏览器下仅支持IE9以上）
HTML代码

XML/HTML Code复制内容到剪贴板

1. <divstyle="height:200px;width:200px;border:1pxsolid#ccc;">

2. <divclass="slider"id="slider">这里是内容</div>

3. </div>

4. <buttononclick="document.getElementById('slider').classList.toggle('closed');">点击看看</button>

CSS代码

CSS Code复制内容到剪贴板

1. .slider{

2. overflow-y:hidden;

3. max-height:500px;

4. /*最大高度*/

5. background:pink;

6. height:200px;

7. width:200px;

8. /*Webkit内核浏览器：SafariandChrome*/

9. -webkit-transition-property:all;

10. -webkit-transition-duration:.5s;

11. -webkit-transition-timing-function:cubic-bezier(0,1,0.5,1);

12. /*Mozilla内核浏览器：firefox3.5+*/

13. -moz-transition-property:all;

14. -moz-transition-duration:.5s;

15. -moz-transition-timing-function:cubic-bezier(0,1,0.5,1);

16. /*Opera*/

17. -o-transition-property:all;

18. -o-transition-duration:.5s;

19. -o-transition-timing-function:cubic-bezier(0,1,0.5,1);

20. /*IE9*/

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