JavaScript transitionEndイベント

transitionEndイベントでは、アニメーションで変化する要素の回数だけ実行されます。
たとえば、Xと透明度が変わる場合には、transitionEndイベントは、Xの変化で1回、透明度の変化で1回、合計2回実行されます。

とあります
下記を実行するとendが2回出るのがわかります
下記のように2つのプロパティをセットしつつ、1回しかendを出さない方法はありますでしょうか？

<style>
body,html{
width:100%;
height:100%;
}
.m{
opacity:0;
transform: translateX(100%);
transition: 1s ;
}
.m.m_{
opacity:1;
transform:translateX(0%);
}
</style>

<script>
window.onload=function(){
div=document.createElement("div");
div.style.width="150px";
div.style.height="50px";
div.style.position="absolute";
div.style.top="0%";
div.style.right="0%";
div.classList.add("m");
div.setAttribute("id","div");
div.style.background="red";
div.addEventListener("transitionend", function() {
alert("end");
});
document.body.appendChild(div);
setTimeout("document.getElementById(\"div\").classList.add(\"m_\")",1000);
}
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

最後にtransitionEndが発生してから、一定時間無効にする関数を書くのは如何でしょうか。

JavaScript
1    <script>
2        window.onload=function(){
3            div=document.createElement("div");
4            div.style.width="150px";
5            div.style.height="50px";
6            div.style.position="absolute";
7            div.style.top="0%";
8            div.style.right="0%";
9            div.classList.add("m");
10            div.setAttribute("id","div");
11            div.style.background="red";
12            /*
13            div.addEventListener("transitionend", function() {
14                alert("end");
15            });
16            */
17            transitionEndsOnce(div, function() {
18                alert("end");
19            });
20            document.body.appendChild(div);
21            setTimeout("document.getElementById(\"div\").classList.add(\"m_\")",1000);
22        }
23
24        function transitionEndsOnce(div, callback) {
25            var tick = Date.now();
26            div.addEventListener('transitionend', function(e) {
27                var diff = Date.now() - tick;
28                tick = Date.now();
29                if (diff > 20) { // this number can be changed, but normally all the event trigger are done in the same time
30                    return callback && callback(e);
31                }
32            });
33        }
34    </script>