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

查看此以獲取更多信息。