zoukankan      html  css  js  c++  java
  • 监测c3动画过渡完成的事件

    监测css3动画完成的事件 transitionend

    用法:

    	let element = document.getElementById("slidingMenu");
          element.addEventListener("transitionend", function(event) {
            element.innerHTML = "Done!";
          }, false);
          
    
    css3用AnimationEnd判断动画是否完成, css3在动画完成后执行事件
    用css3的animation完成一个动画,当只有这个动画完成时才执行令一个事件,比如让动画保持在终止的状态或其他一些事件。我们该怎么办呢。 
    第一种方法: 
    用计时器,设定一个和动画时长一样的time,过time事件去执行这个函数。 
    setTimeout(function(){ },time); 
    第二种方法: 

    当-webkit-animation动画结束时有一个webkitAnimationEnd事件,只要监听这个事件就可以了。 

    不同浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)

    例子: 

    复制代码
    代码如下:

    <!DOCTYPE HTML> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="author" content="@my_programmer"> 
    <title>webkitAnimationEnd</title> 
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="format-detection" content="telephone=no"/> 
    <style type="text/css"> 
    #div{ 
    200px; 
    height:200px; 
    background:#f60; 
    margin:100px auto; 
    -webkit-transition: all ease 1s; 

    .change{ 
    -webkit-animation: transform 1s 2 ease; 

    @-webkit-keyframes transform { 
    % { -webkit-transform: scale(1)} 
    % { -webkit-transform: scale(2)} 
    % { -webkit-transform: scale(0.5)} 
    % { -webkit-transform: scale(1)} 

    </style> 
    </head> 
    <body> 
    <div id="div"></div> 
    <script type="text/javascript"> 
    var tt = document.querySelector('#div'); 
    tt.addEventListener("click", function(){ 
    this.className = 'change'; 
    }, false); 
    tt.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件 
    this.className = this.className.replace('change', ' '); 
    console.log(2); 
    }, false); 
    </script> 
    </body> 
    </html> 

    拓展: 
    1、-webkit-animation动画其实有三个事件: 
    开始事件 webkitAnimationStart 
    结束事件 webkitAnimationEnd 
    重复运动事件 webkitAnimationIteration 
    你可以在上个例子中测试一下这两个事件 

    复制代码
    代码如下:

    tt.addEventListener("webkitAnimationStart", function(){ //动画开始时事件 
    console.log(1);//动画开始时,控制台输出1 
    }, false); 
    tt.addEventListener("webkitAnimationIteration", function(){ //动画重复运动时的事件 
    console.log(3);//第一遍动作完成时,控制台输出3 
    }, false); 

    2、css3的过渡属性transition,在动画结束时,也存在结束的事件:webkitTransitionEnd; 

    注意:transition,也仅仅有这一个事件。

    案例: 下面案例可以参考链接: http://daneden.github.io/animate.css/

    [html] view plain copy
     
    1. $('.order_popBox').show().removeClass('orderPopBox_fadeInUpBig animated').addClass('orderPopBox_fadeInUpBig animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){  
    2.                 $(this).removeClass('orderPopBox_fadeInUpBig animated');  

  • 相关阅读:
    多级导航Menu的CSS
    Centos7在线安装PostgreSQL和PostGIS
    PostGis 根据经纬度查询两点之间距离
    在PowerDesigner中表显示中添加Code的显示
    Tomcat部署Geoserver
    PostGIS之路AddGeometryColumn函数添加一个几何类型字段
    怎样把多个excel文件合并成一个
    Error:java: 无效的目标发行版: 11
    PowerDesigner导出Excel
    GeoServer发布高清电子地图
  • 原文地址:https://www.cnblogs.com/hao123456/p/8976783.html
Copyright © 2011-2022 走看看