今天小编跟大家讲解下有关利用CSS3的transition属性实现滑动效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关利用CSS3的transition属性实现滑动效果 的相关资料，希望小伙伴们看了有所帮助。
首先援引一下w3school上的transition基本知识：
定义和用法transition 属性是一个简写属性 用于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-delay注释：请始终设置 transition-duration 属性 否则时长为 0 就不会产生过渡效果。
语法
CSS Code复制内容到剪贴板 transition:propertydurationtiming-functiondelay;实现滑动效果只需要一个DIV元素便可实现滑动效果 避免了使用Javascript为元素的动画（IE浏览器下仅支持IE9以上）HTML代码
XML/HTML Code复制内容到剪贴板 <divstyle="height:200px;width:200px;border:1pxsolid#ccc;"> <divclass="slider"id="slider">这里是内容</div> </div> <buttononclick="document.getElementById('slider').classList.toggle('closed');">点击看看</button>CSS代码
CSS Code复制内容到剪贴板 .slider{ overflow-y:hidden; max-height:500px; background:pink; height:200px; width:200px; -webkit-transition-property:all; -webkit-transition-duration:.5s; -webkit-transition-timing-function:cubic-bezier(0,1,0.5,1); -moz-transition-property:all; -moz-transition-duration:.5s; -moz-transition-timing-function:cubic-bezier(0,1,0.5,1); -o-transition-property:all; -o-transition-duration:.5s; -o-transition-timing-function:cubic-bezier(0,1,0.5,1); -ms-transition-property:all; -ms-transition-duration:.5s; -ms-transition-timing-function:cubic-bezier(0,1,0.5,1); } .slider.closed{ max-height:0; }demo演示地址:http://www.zjgsq.com/example?pid=1166
来源：爱蒂网
