您好,欢迎来到无锡中智培训学校电脑培训专业网!咨询电话:0510-82828991
分享到:
无锡中智职业培训学校七大校区就近上课:南禅寺校区、胜利门校区、河埒口校区、新区校区、恒隆校区、宜兴校区、江南校区

网页设计CSS3动画效果回调处理

时间:2014-12-19 13:41 作者:中智培训 点击:
  无锡中智培训老师表示,我们在做js动画的时候,很多时候都需要做回调处理,如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等,但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢?
  CSS3动画也是可以做回调处理的,这里分为两个属性,一个是transition[w3c文档],另外一个是animation[w3c文档]。
  1、transition
  对于transition,可以监听transitionend事件,当动画完成时触发,可以这样使用:
  代码如下:
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>css3-transitionend - BeyondWeb</title>
  <style>
  * {margin: 0; padding: 0;}
  .rect {
  width: 100px;
  height: 100px;
  background-color: #f80;
  -webkit-transition: all .5s;
  }
  </style>
  <script>
  window.onload = function () {
  var _rect = document.querySelector('.rect');
  _rect.onclick = function () {
  _rect.style.webkitTransform = 'translateX(300px)';
  }</p> <p> _rect.addEventListener('webkitTransitionEnd', function () {
  alert('动画执行完毕!');
  // callback here
  }, false);
  }
  </script>
  </head>
  <body>
  <div class="rect"></div>
  </body>
  </html>
  2、animation
  对于animation我们可以监听animationend事件,示例代码如下:
  代码如下:
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>css3-animationend - BeyondWeb</title>
  <style>
  * {margin: 0; padding: 0;}
  .rect {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #f80;
  }</p> <p> @-webkit-keyframes move {
  from {
  -webkit-transform: rotate(0);
  }
  to {
  -webkit-transform: rotate(360deg);
  }
  }
  </style>
  <script>
  window.onload = function () {
  var _rect = document.querySelector('.rect');
  _rect.onclick = function () {
  _rect.style.webkitAnimation = 'move 3s';
  }</p> <p> _rect.addEventListener('webkitAnimationEnd', function () {
  alert('动画执行完毕!');
  // callback here
  }, false);
  }
  </script>
  </head>
  <body>
  <div class="rect"></div>
  </body>
  </html>
  推荐:网页设计表单Button的Outline
       网页设计html元素拖拽功能

无锡中智教育 无锡电脑培训班 无锡网页设计培训 无锡平面设计培训
无锡市中智职业培训学校 无锡中智培训 专注电脑培训|网站地图
热线电话:400-8818-707 版权所有 无锡中智培训学校 WWW.WX68.COM Copyright ©2013 ALL Rights Reserved
备案号:渝ICP备09051384号-1
网站地图