CSS animation 的 jQuery 事件监听器结束

Question

我对 jQuery 有疑问。 我尝试添加.on event listener器，用于 animation 结束时。 它不工作。 我希望每次 animation 重新启动时， jetPosition和animationDuration都是随机的。 我放了一个console.log来检查监听器是否被触发：（非常感谢任何帮助。

我还在进一步研究中将其更改为动画迭代事件侦听器。 尽管它并不总是从屏幕左侧开始，并且在没有明确原因的情况下在控制台日志中重复出现，但它似乎可以工作。

作为额外的奖励，我希望在整个视口中应用多个 jet 实例。

CSS：

#jet {
    animation: fly linear 0s infinite normal backwards;
}

/*Keyframes*/

@keyframes fly {
    from {
        transform: translateX(-10vw)
    }

    to {
        transform: translateX(140vw)
    }
}

jQuery：

function getRndInteger(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // Jet Animation
    var jet = $("#jet");

    jet.css({
        top: getRndInteger(20, 50) + "vh",
        left: '0vw',
        width: '8vw',
        position: 'absolute',
        animationDuration: getRndInteger(5, 10) + "s"
    });

    function flyJet() {
        jet.css({
            top: getRndInteger(20, 50) + "vh",
            left: '0vw',
            width: '8vw',
            position: 'absolute',
            animationDuration: getRndInteger(5, 10) + "s"
        });
    }


    jet.on("animationiteration", function () {
        console.log("repeating");
        flyJet();
    });

Answer 1

尝试使用类似的东西：

element.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
    function(e) {
    // code to execute after transition ends
});

查看此以获取更多信息。