上一节:
下一节:

  JavaScript HTML DOM transitionend 事件

  • transitionend 事件

    当CSS转换完成时发生transitionend事件。
    注意：如果在完成之前删除了转换，例如，如果删除了CSS transition-property属性，则不会触发transitionend事件。
    有关CSS Transitions的更多信息，请参阅我们的CSS3 Transitions教程。
    当CSS转换结束时，使用<div>元素执行某些操作： 
    // Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);

// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
    尝试一下

  • 浏览器支持

    项 IE/Edge Chrome FireFox Safari Opera
    事件
    transitionend
    10.0+
    26.0+
    4.0 (webkitTransitionEnd)
    16.0
    4.0 (mozTransitionEnd)
    6.1
    3.1 (webkitTransitionEnd)
    12.1
    10.5 (oTransitionEnd)

  • 语法

    在JavaScript中，使用addEventListener()方法：
    object.addEventListener("webkitTransitionEnd", myScript); // Code for Safari 3.1 to 6.0
    object.addEventListener("transitionend", myScript); // 标准语法
    注意:在Internet Explorer 8和更早版本不支持使用addEventListener()方法。

  • 技术细节

    项目 描述
    冒泡： 有
    取消： 有
    事件类型： TransitionEvent
    DOM版本 DOM Event Level 3

  • 相关页面

    HTML参考 ： HTML transitionend 属性
    CSS教程：CSS3过渡
    CSS参考：CSS3 transition属性
返回Event对象参考    返回事件参考
上一节:
下一节: