Rumah  >  Artikel  >  hujung hadapan web  >  H5之13__CSS过渡、动画和变换

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

黄舟
黄舟asal
2017-02-18 15:04:372464semak imbas

一.  简介

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

在所有浏览器中,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页面如下:




	
	
	
	Touch
	

<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文件如下:


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;
}


 以上就是H5之13__CSS过渡、动画和变换的内容,更多相关内容请关注PHP中文网(www.php.cn)!



Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn