您的当前位置：首页 H5之13__CSS过渡、动画和变换

H5之13__CSS过渡、动画和变换

来源：乐模财经

一. 简介

在触摸设备上，动画是用户手势的反馈.

在所有浏览器中，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>
	<p id="touchme">
	<button class="button" id="toggle" style="width:100%; height:60px;">Toggle Picture</button>
	<p 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>
	</p>
	</p>
</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;
}

看效果图:

完整的html页面如下:

<!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>
	<p id="touchme">
	<button class="button" id="toggle" style="width:100%; height:60px;">Toggle Picture</button>
	<p 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>
	</p>
	</p>
</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;
}