利用CSS3的transition属性实现滑动效果


Posted in HTML / CSS onAugust 05, 2015

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

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

利用CSS3的transition属性实现滑动效果
语法

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-height500px;   
  4.     /* 最大高度 */  
  5.     background: pink;   
  6.     height200px;   
  7.     width200px;   
  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

HTML / CSS 相关文章推荐
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 #HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 #HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 #HTML / CSS
详解CSS中iconfont的使用
Aug 04 #HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 #HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 #HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 #HTML / CSS
You might like
PHP学习之字符串比较和查找
2011/04/17 PHP
php 强制下载文件实现代码
2013/10/28 PHP
php实现上传图片文件代码
2015/07/19 PHP
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
canvas实现钟表效果
2017/02/13 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
python错误处理详解
2014/09/28 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python连接DB2数据库
2016/08/27 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
三年级小学生评语
2014/04/22 职场文书
2014年社区工会工作总结
2014/12/18 职场文书