利⽤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 >
2.      <div class="slider" id="slider">这⾥是内容</div>
3.  </div>
4.  <button onclick="ElementById('slider').le('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;
transition用法搭配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. }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。