transitionend事件触发两次 [英] transitionend event fires twice

问题描述

我有以下代码，我的问题是 transitionend 事件被触发两次。我不知道是什么原因造成的。我怀疑供应商前缀造成它，但他们没有。即使我只留下 transitionend 和转换，它仍会启动两次。

I have the following code and my problem is that the transitionend event is fired twice. I don't know what's causing this. I suspected the vendor prefixes caused it, but they don't. Even if I only leave transitionend and transition it will still fire twice.

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>

推荐答案

transitionend 对于每个转换的属性触发，在顶部和 left 。

transitionend fires for each property transitioned, in your case top and left.

您可以在 event.propertyName 访问与活动相关联的媒体资源。

You can access the property associated with the event at event.propertyName.

没有transition s end事件，因此你可能需要一些hackiness，例如过滤 transitionend 回调处理只有一个过渡的属性。例如：

There's no "transitionsend" event, so you will probably need some hackiness such as filtering the transitionend callback handling for only one of the transitioned properties. E.g.:

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

---

没有浏览器触发 MSTransitionEnd 事件。这是在MS文档的某一点，但有时在IE10测试版之前，它被替换为标准的 transitionend 事件。

---

ps. No browser fires the MSTransitionEnd event. It was at some point in the MS docs, but sometime before the IE10 beta release it was replaced by the standard transitionend event.

这篇关于transitionend事件触发两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！