• css3用AnimationEnd判断动画是否完成, css3在动画完成后执行事件


    用css3的animation完成一个动画,当只有这个动画完成时才执行令一个事件,比如让动画保持在终止的状态或其他一些事件。我们该怎么办呢。 
    第一种方法: 
    用计时器,设定一个和动画时长一样的time,过time事件去执行这个函数。 
    setTimeout(function(){ },time); 
    第二种方法: 

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

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

    拓展: 
    1、-webkit-animation动画其实有三个事件: 
    开始事件 webkitAnimationStart 
    结束事件 webkitAnimationEnd 
    重复运动事件 webkitAnimationIteration 

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

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

  • 相关阅读:
    java基础英语---第十九天
    java基础英语---第十六天
    java基础英语---第十七天
    java基础英语---第十四天
    java基础英语---第十五天
    java基础英语---第十三天
    设计模式
    设计模式
    设计模式
    设计模式
  • 原文地址:https://www.cnblogs.com/xiaohui108/p/6073948.html
Copyright © 2020-2023  润新知