transitionend事件发生两次

Question

我有以下代码,我的问题是该transitionend事件被触发两次.我不知道是什么造成了这种情况.我怀疑供应商前缀导致它,但他们没有.即使我只有离开transitionend,并transition仍然会闪光两次.

CSS

transition: 1s ease-out;

JS

document.addEventListener('click', function (e) {
    var submarine = document.querySelector('.submarine');
    var submarineX = e.clientX - submarine.offsetWidth / 2;
    var submarineY = e.clientY - submarine.offsetHeight / 2;

    submarine.style.left = submarineX + "px";
    submarine.style.top = submarineY + "px";
});

document.addEventListener('transitionend', function (event) {
    console.log(event.type + " " + new Date().getTime());
});

小提琴

document.addEventListener('transitionend', function (event) {
    console.log(event.type + " " + new Date().getTime());
});

document.addEventListener('click', function (e) {
    var submarine = document.querySelector('.submarine');
    var submarineX = e.clientX - submarine.offsetWidth / 2;
    var submarineY = e.clientY - submarine.offsetHeight / 2;

    submarine.style.left = submarineX + "px";
    submarine.style.top = submarineY + "px";
});

.submarine {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    transition: 1s ease-out;
}

<div class="submarine"></div>

Answer 1

transitionend在你的情况下top,每个财产都会被转移left.

您可以访问与该事件相关联的媒体资源event.propertyName.

有没有"过渡小号结束"事件,所以你可能会需要一些hackiness如过滤transitionend回调处理,只为转移的特性之一.例如:

function (event) {
    if (event.propertyName == 'top') {
        //put your code here
    }
});

PS.没有浏览器触发MSTransitionEnd事件.它在MS文档中的某个时刻,但在IE10测试版发布之前的某个时候,它被标准transitionend事件所取代.

Answer 2

事件将针对已转换的每个属性触发.

propertyNameFabricio建议的方式是正确的方法,但是根据情况你也可以使用one();,就像这样.

$(document).one('transitionend webkitTransitionEnd MSTransitionEnd', function() {
   ...
});

Answer 3

对于任何寻求简单，一次性复制和粘贴解决方案的人（我只提供了必要的CSS）。这不能回答问题，并且可以回答我登陆这里时的需求。

CSS：

.my-elem {
    transition: height 0.5s ease-out, opacity 0.5s ease-out;
}

JavaScript：

var elem = document.querySelector(".my-elem");

var transitionCounter = 0;

var transitionProp = window.getComputedStyle(elem , null)["transition-property"] || "";

// We just need to know how many transitions there are
var numTransitionProps = transitionProp.split(",").length;

elem.addEventListener("transitionend", (event) => {
  // You could read event.propertyName to find out which transition was ended, 
  // but it's not necessary if you just want to know when they are all done.
  if (transitionCounter < (numTransitionProps - 1)) {
    transitionCounter++;
  } else {
    transitionCounter = 0; // reset
    alert("I'm done!!!"); // do what you need to
  }
}, false);

经过IE11，Chrome 48和Firefox 37的测试。