H5之13__CSS过渡、动画和变换
来源:互联网 发布:java代码优化 编辑:程序博客网 时间:2024/06/05 10:10
一. 简介
在触摸设备上, 动画是用户手势的反馈.
在所有浏览器中,JS 是单线程执行的. 如果有异步任务, 比如 setTimeOut() ,会加入到执行队列,然后在线程变得空闲时执行。
当 定时器里面的代码执行时, 其他的代码又不能执行了。 也就是说事件处理程序是按队列顺序执行的。
由于这些原因, 我们应该尽量避免使用setTimeOut() 动画, 可以使用CSS 过渡(transition ) 实现同样的效果,而且体验更好.
二. 过渡(transition)
CSS 过渡是能用 CSS 实现的最简单的动画。 过渡的强大之处是,它是在独立于 JS 执行 线程的另一个线程中执行的。
使用动画 能有一个更动态的界面, 并仍然能让事件处理程序保持快速运行。
一个理念: 任何可实现动画的 CSS 属性, 都可以用一个过渡来实现动画。
已设置动画的 CSS属性值的改变会触发动画。 使用 CSS tranition 属性来应用过渡。
语法如下:
transition: [property] [duration] [timing-function] [delay] ;
所有的值都是可选的.
例如: transition: color 1s ease-out, 指定了一个在一秒内颜色变化逐渐变慢的过渡. 虽然过渡现在已经成为标准了,但还是需要前缀才能在WebKit 内核 的浏览器上使用,
在 IE, Opera, Firefox 浏览器无需前缀了。
看一段代码, 轻触按钮时, 隐藏和显示图像的例子, 这里有淡入和淡出效果:
<body><div id="touchme"><button class="button" id="toggle" style="width:100%; height:60px;">Toggle Picture</button><div class="picture hidden"><br/><br/><a><img src="http://img1.2345.com/duoteimg/qqTxImg/2012/04/09/13339510584349.jpg" width="320" height="256" alt="Goldfinch"></a></div></div></body>通过CSS 来应用过渡
/***应用过渡 ***/.picture { -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; opacity: 1;}.picture.hidden { opacity: 0;}
看效果图:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><title>Touch</title><link rel="stylesheet" src="screen.css" charset="utf-8"></head><body><div id="touchme"><button class="button" id="toggle" style="width:100%; height:60px;">Toggle Picture</button><div class="picture hidden"><br/><br/><a><img src="http://img1.2345.com/duoteimg/qqTxImg/2012/04/09/13339510584349.jpg" width="320" height="256" alt="Goldfinch"></a></div></div></body><script src="facade.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">(function(){//查找样式选择器var h = document.querySelector(".picture");function fadeIn() {var h = document.querySelector(".picture");var opacity = parseFloat(h.style.opacity);if(opacity < 1) {opacity = opacity + 0.05;h.style.opacity = opacity;window.setTimeout(fadeIn, 33);}}function fadeOut() {var opacity = parseFloat(h.style.opacity);if(opacity > 0.2) {opacity = opacity - 0.1;h.style.opacity = opacity;window.setTimeout(fadeOut, 10);} else {h.style.opacity = 0;}}var hidden = true;function togglePicture(){var h = document.querySelector(".picture");if(hidden) {h.className = "picture";fadeIn();hidden = false;} else {h.className = "picture hidden"; fadeOut();hidden = true;}}$('.button').on('tap', function(e) {e.preventDefault();togglePicture();e.target.className = "active button";}).on('tapend', function(e) {e.target.className = "button";});})();</script></html>
css文件如下:
body { margin: 0; padding: 0; font-family: sans-serif; text-align: center;}.button { font-size: 16px; padding: 10px; font-weight: bold; border: 0; color: #fff; border-radius: 10px; box-shadow: inset 0px 1px 3px #fff, 0px 1px 2px #000; background: #ff3019; opacity: 1;}.active, .button:active { box-shadow: inset 0px 1px 3px #000, 0px 1px 2px #fff;}/***应用过渡 ***/.picture { -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; opacity: 1;}.picture.hidden { opacity: 0;}
1 0
- H5之13__CSS过渡、动画和变换
- 《HTML5权威指南》之过渡动画和变换
- css3新添加的过渡、动画和变换
- HTML5权威指南笔记:23-过渡、动画和变换
- CSS3变换、过渡、动画效果
- Css3变换和过渡
- Android之过渡动画
- Android之过渡动画
- Vue之过渡动画
- css动画之过渡
- CSS过渡、动画、变换,综合实例
- 动画和过渡效果
- CSS3过渡和动画
- CSS3过渡和动画
- css动画和过渡
- 帧动画和过渡动画
- Event事件对象之动画事件和过渡事件
- CSS3之转换 、过渡 、动画
- Java,线程,还有它的并发
- 怎么设计用户错误提示
- 数据库与文件的数据存储的区别
- 课程设计--学生信息管理系统
- 杂记
- H5之13__CSS过渡、动画和变换
- 基本运算符
- 我想做一个天气预报的APP,想知道如何从网页上截取数据并录入数据库。
- 17 - 01 - 15 计算机网络(05)(以太网)
- Android 自定义 View 之 onMeasure() 源码分析及重写
- 写博客总结
- 插值像素真相大揭秘
- 【Phalcon】Phalcon多平台的安装配置
- JBoss EAP应用服务器部署方法和JBoss 开发JMS消息服务小例子