刷新頁面時如何繼續使用 javascript 添加的動畫？

Question

在下圖中，我有在按鈕上播放一段時間的動畫。 但是，如果我在播放動畫時刷新頁面或退出並重新進入，則動畫不會繼續。 雖然此時頁面上的人會繼續顯示，但從外面進入的人不會出現。 我該如何解決這個問題？

CSS

@keyframes glowing {

        50% {
            background-color: #ff0000;
            box-shadow: 0 0 20px #ff0000;

        }

        100% {
            background-color: #ff0000;
            box-shadow: 0 0 5px #ff0000;

        }
    }

    .glowing500 {
        animation: glowing 300ms infinite;

    }

JAVASCRIPT

function tensecond() {

        setTimeout(function () {
            const
                delay = ms => new Promise(r => setTimeout(r, ms)),
                btn_A = document.getElementById('first'),
                btn_B = document.getElementById('second'),
                animLoopgenerator = function* () {
                    const animLoop = [{
                            stop: null,
                            start: btn_A,
                            time_ms: 15000
                        }, {
                            stop: btn_A,
                            start: btn_B,
                            time_ms: 15000
                        }, {
                            stop: btn_B,
                            start: null,
                            time_ms: null
                        },


                    ];

                    for (elm of animLoop) yield elm
                };

            async function animLoop() {
                for await ({
                    stop,
                    start,
                    time_ms
                } of animLoopgenerator()) {
                    if (stop) stop.classList.remove('glowing500');
                    if (start) start.classList.add('glowing500');
                    if (time_ms) await delay(time_ms);
                }
            }

            animLoop();
        });

}

Answer 1

You have to save your animation state in cookie whenever your animation change, so when page refreshes, read the state from cookie first and resume the animation from that state.

您可以從這里學習 cookie 實現： https://www.w3schools.com/js/js_cookies.asp

希望這對你有用！