如何利用CSS3的transition屬性實現滑動效果

這篇文章主要講解了“如何利用CSS3的transition屬性實現滑動效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何利用CSS3的transition屬性實現滑動效果”吧！

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

定義和用法
transition 屬性是一個簡寫屬性，用于設置四個過渡屬性：
transition-property
transition-duration
transition-timing-function
transition-delay
注釋：請始終設置 transition-duration 屬性，否則時長為 0，就不會產生過渡效果。

語法

CSS Code復制內容到剪貼板

1. transition: property duration timing-function delay;  

實現滑動效果
只需要一個DIV元素便可實現滑動效果，避免了使用JavaScript為元素的動畫（IE瀏覽器下僅支持IE9以上）
HTML代碼

XML/HTML Code復制內容到剪貼板

1. <div style="height: 200px; width: 200px; border: 1px solid #ccc;">  

2.       <div class="slider" id="slider">這里是內容</div>  

3.   </div>  

4.   <button onclick="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內核瀏覽器：Safari and Chrome*/  

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

感謝各位的閱讀，以上就是“如何利用CSS3的transition屬性實現滑動效果”的內容了，經過本文的學習后，相信大家對如何利用CSS3的transition屬性實現滑動效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！