transitionend、animationendをいろんなブラウザに対応させた状態でつかう際の注意

kimizuka.hatenablog.com

以前の記事でちらっと紹介しましたが、ブラウザによってはtransitionend、animationendにプレフィックスが必要になる場合があります。

CSS

.box {
    position: absolute;
    top: 20px;
    border-radius: 12px;
    width: 120px; height: 120px;
    background: #E91E63;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    -webkit-transition: -webkit-transform .1s .5s ease-in;
    transition: -webkit-transform .1s .5s ease-in;
    transition: transform .1s .5s ease-in;
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
}

.left {
    left: 20px;
}

.right {
    left: 160px;
}

.box.anim {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

JavaScript

(function(win, doc) {
    
    "use strict";
    
    var box = doc.getElementById("box");
    
    box.addEventListener("webkitTransitionEnd", function(evt) { // -webkit-transition用
        alert(evt.type);
    }, false);
    
    box.addEventListener("transitionend", function(evt) { // transition用
        alert(evt.type);
    }, false);
    
    setTimeout(function() {
        box.classList.add("anim");
    }, 200);
    
})(this, document);

jQueryでは半角スペース区切りでイベント名を複数渡せるのでもうちょっと簡単にかけます。

JavaScript with jQuery

$(function() {
    
    "use strict";
   
    var $box = $("#jBox");
    
    $box.on("webkitTransitionEnd transitionend", function(evt) { // 複数渡せる
        alert(evt.type);
    });
    
    setTimeout(function() {
        $box.addClass("anim");
    }, 400);
    
});

DEMO

webkit-transitionendが発火すればtransitionendは発火せず、その逆もしかりなので基本的にはこれで問題なのですが、

一点注意が必要なのは、CSSに-webkit-transitionのみを指定している場合でもJSではtransitionendが優先されて発火する場合があるということです。

CSS

.box {
    position: absolute;
    top: 20px;
    border-radius: 12px;
    width: 120px; height: 120px;
    background: #E91E63;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    -webkit-transition: -webkit-transform .1s .5s ease-in; // -webkit-transitionしかはっていない
    -webkit-transform: translateY(200px);
}

.left {
    left: 20px;
}

.right {
    left: 160px;
}

.box.anim {
    -webkit-transform: translateY(0);
}

JavaScript

(function(win, doc) {
    
    "use strict";
    
    var box = doc.getElementById("box");
    
    box.addEventListener("webkitTransitionEnd", function(evt) {
        alert(evt.type);
    }, false);
    
    box.addEventListener("transitionend", function(evt) { // こちらが優先して発火する（ない場合はwebkitTransitionEndが発火する）
        alert(evt.type);
    }, false);
    
    setTimeout(function() {
        box.classList.add("anim");
    }, 200);
    
})(this, document);

$(function() {
    
    "use strict";
   
    var $box = $("#jBox");
    
    $box.on("webkitTransitionEnd transitionend", function(evt) {
        alert(evt.type);
    });
    
    setTimeout(function() {
        $box.addClass("anim");
    }, 400);
    
});