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());
});

Fiddle

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 访问与事件关联的属性。

没有“transitionsend”事件，因此您可能需要一些技巧，例如过滤transitionend 回调处理仅针对其中一个已转换属性。例如：

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

---

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

Answer 2

每个已转换的属性都会触发该事件。

Fabricio 建议的 propertyName 方法是正确的方法，但是如果您使用 jQuery，您也可以使用 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 中测试。

Answer 4

对于仍在寻找更强大的解决方案（例如“allTransitionEnd”事件）的任何人，我已经实现了jQuery "special event"，更多的是作为我正在研究的东西的概念证明，但我可能会在 Github 上发布一个库.

查看JSBin。

这很棘手，所以我不会解释太多，但它使在元素上的所有过渡结束后做一些事情变得非常容易：

$(function () {

    $element.on('allTransitionEnd', function () {
        // do something after all transitions end.
    });

});

它通过探测元素的过渡属性来工作，然后绑定到本机 transitionend 事件（包括特定于供应商的事件）以跟踪已完成过渡的属性。当所有转换完成后，它会触发任何绑定的 allTransitionsEnd 处理程序，然后清除转换属性，以防它们也发生了变化，并在下次重新探测它们。

当多个属性以不同的延迟和/或持续时间进行转换并且您想在所有转换完成后执行某些操作时，这非常有用。

示例用例：

• 在淡出和缩小后移除一条闪现消息。
• 在可重用组件（例如菜单或模式）中触发“打开”和“关闭”事件，消费者可能希望在过渡结束后执行一些逻辑，而不是窥探 css 过渡。

如果您只转换一个属性，或者没有不同的延迟和/或持续时间，那么一个简单的解决方案就可以了。

适用于最新版本的 Chrome、Firefox、Safari、Mobile Safari 以及 IE11 和 IE10。在 IE8 中不起作用，因为不支持转换。绑定到其他原生事件作为后备。

Answer 5

您可以使用target 属性过滤掉由子元素触发的事件，并使用propertyName 仅在特定属性更改时触发事件。

const handleTransitionEnd = event => {
  if (event.target !== myDomElementRef) return;
  if (event.propertyName !== "height") return;

  // Do my things
};

Answer 6

这是一个相对古老的问题，但我想我会分享我的答案：

function OnTransitionEvent() {
    var t,
        el = document.createElement('transitionElement');

    var transitions = {
        'transition'      : 'transitionend',
        'OTransition'     : 'oTransitionEnd',
        'MozTransition'   : 'transitionend',
        'WebkitTransition': 'webkitTransitionEnd'
    };

    for (t in transitions){
        if (el.style[t] !== undefined){
            return transitions[t];
        }
    }
}

var transitionEvent = OnTransitionEvent();

$(document).one(transitionEvent, function() { 
    console.log('done');
});