如何簡化我的 js 代碼以實現 css 動畫？

Question

我制作了 CSS 動畫和按鈕來播放動畫，並使用添加和刪除類來播放每個動作。 我沒有使用切換按鈕，因為如果我使用切換按鈕，它會與其他按鈕混合在一起。
我見過很多完全沒有使用js的CSS動畫。
有沒有辦法減少我的js代碼並簡化它？

這是代碼-

    playbtn.addEventListener("click", function (e) {
        e.preventDefault;
        ball.style.display = "block";
        bowl.style.display = "none";

        ball.classList.remove("ball-move");
        ball.offsetWidth = ball.offsetWidth;
        ball.classList.add("ball-move");

        document.getElementById('dFace').className = '';
        dFace.offsetWidth = dFace.offsetWidth;
        dFace.classList.add("p-head-move");

        document.getElementById('ear').className = '';
        ear.offsetWidth = ear.offsetWidth;
        ear.classList.add("lean");

        document.getElementById("mouthid").className = '';
        mouth.offsetWidth = mouth.offsetWidth;
        mouth.classList.add("mouth-move");

    }, false);

Answer 1

我認為您必須閱讀 Animation play state api，這將減少您的代碼。 文檔鏈接！

Answer 2

1，根據你的代碼，我假設 bowl、ball、dFace、ear 和 mouth 都是 HTMElement，它們已經從 document.getElementById 中分配了一個值。 因此，您可能不必在此函數中再次獲取 HTMLElement。

2，您可能不需要為 offsetWidth 分配值，因為它是一個只讀屬性，如https://www.w3schools.com/jsref/prop_element_offsetwidth.asp中所述。 您可以刪除這些行。

3. 您可能缺少 () for e.preventDefault

我會提出以下建議：

playbtn.addEventListener("click", function (e) {
    e.preventDefault();
    ball.style.display = "block";
    bowl.style.display = "none";

    ball.classList.remove("ball-move");
    ball.classList.add("ball-move");

    dFace.className = '';
    dFace.classList.add("p-head-move");

    ear.className = '';
    ear.classList.add("lean");

    mouth.className = '';
    mouth.classList.add("mouth-move");
}, false);

此外，dFace、耳朵和嘴巴的動作相似，因此您可以將其包裝在函數調用 restartAnimation 中，以進一步減少代碼重復。

const restartAnimation = (ele, className) => {
    ele.className = '';
    ele.classList.add(className);
}

playbtn.addEventListener("click", function (e) {
    e.preventDefault();
    ball.style.display = "block";
    bowl.style.display = "none";

    ball.classList.remove("ball-move");
    ball.classList.add("ball-move");

    restartAnimation(dFace, "p-head-move")
    restartAnimation(ear, "lean")
    restartAnimation(mouth, "mouth-move")

}, false);

Answer 3

您也應該在您的帖子中包含您的 CSS！ 但我認為您可以通過使用animation-iteration-count: infinite;來避免restartAnimation實例。 （例如，如果您想讓動畫循環播放）在動畫部分的 CSS 選擇器中。 我建議在這里查看 CSS 動畫文檔，因為它非常清楚！ 祝你好運！