CSS动画结束的jQuery事件监听器答案

【问题标题】：jQuery event listener for CSS animation endCSS动画结束的jQuery事件监听器
【发布时间】：2021-05-21 16:38:47
【问题描述】：

我对 jQuery 有疑问。我尝试在动画结束时添加.on event listener。它不工作。我希望每次动画重新启动时 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();
    });

【问题讨论】：

我不知道jQuery，但是对于普通的JS，使用this。
你需要animationend，而不是任何过渡事件

标签： javascript html jquery css animation

【解决方案1】：

尝试使用类似的东西：

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

查看this 了解更多信息。

【讨论】：