当前位置:首页 > 前端 > HTML/CSS

关于animation事件的监听

css3 animation大家并不陌生,现在已经大面积使用了,在平常的开发中,有时候我们需要去监听下动画的执行情况,是否已经开始,或者结束来进行其它必要的操作。其实animation是可以被js监听到的,下面我们来看下代码吧。


定义和用法

CSS 动画播放时,会发生以下三个事件:
    animationstart - 动画开始后触发
    animationiteration - 动画重复播放时触发
    animationend - 动画完成后触发


案例Demo演示:

      demo演示:点击这里

<div class="anim_box">
    <div class="line"></div>
    <img src="images/xhr.png" class="xhr current" id="xhr">
  </div>
  <div class="anim_status" id="animStatus">

  </div>
  <div class="op">
      <button class="start" onclick="animPausedFn()">暂停</button>
      <button class="start" onclick="animRunningFn()">继续运动</button>
      <button class="start" onclick="animStartFn()">再次开始</button>
  </div>
  <script>
    window.running = false;
    var $xhr = document.getElementById("xhr");
    //添加
    function addTextFn(text){
      var $as = document.getElementById("animStatus");
      var node=document.createElement("div");
      var textnode=document.createTextNode(text);
      node.appendChild(textnode);
      $as.appendChild(node);
    }

    //开始
    function startFn(){
      addTextFn("开始啦...");
      window.running = true;
    }
    //结束
    function endFn(){
      addTextFn("表演结束");
      $xhr.className="xhr";
      window.running = false;
    }

    //动画开始
    $xhr.addEventListener("webkitAnnimationstart", startFn);
    $xhr.addEventListener("animationstart", startFn);

    //动画结束
    $xhr.addEventListener("webkitAnimationEnd", endFn);
    $xhr.addEventListener("animationend", endFn);


    //点击开始
    function animStartFn(){
      $xhr.className="xhr current";
    } 

    //点击暂停
    function animPausedFn(){
      if(window.running)
        $xhr.style.animationPlayState = "paused";
    } 
    //点击继续
    function animRunningFn(){
      $xhr.style.animationPlayState = "running";
    } 
  </script>

读后有收获可以支付宝请作者喝咖啡
< 上一篇 下一篇 >
文章评论
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部