transitionEnd不适用于火狐

Question

虽然使用正确的前缀，但传递结束事件不会触发。

我的小提琴

js

var flyingCarElem = document.getElementById("flyingCar");

 // register an event handler 
   // ('transitionEnd' for FireFox, 'webkitTransitionEnd' for webkit) 
       flyingCarElem.addEventListener("transitionEnd",function(){
      // will be called when the transition has finished.
    alert("The car arrived");
     });

css

div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
  } 

   div:hover {
width: 300px;
  } 

有人能帮忙吗？

Answer 1

Firefox中的过渡结束事件称为

transitionend

而不是

transitionEnd

您的修复应该很容易：

var flyingCarElem = document.getElementById("flyingCar");

 // register an event handler 
   // ('transitionend' for FireFox, 'webkitTransitionEnd' for webkit) 
       flyingCarElem.addEventListener("transitionend",function(){
      // will be called when the transition has finished.
    alert("The car arrived");
   });