首先援引一下w3school上的transition基本知识：
定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property
transition-duration
transition-timing-function
transition-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
最新文章
热门文章
猜你喜欢
