重置后滑动动画停止正常工作

Question

你好！ 我正在尝试将 幻灯片动画 添加到此脚本中，一切正常，但在达到限制后，当索引再次为 0，照片开始消失。我还使用脚本在完成后 删除动画 但仍然没有。我也没有在控制台中看到任何错误。有什么问题吗？

<!DOCTYPE html>
<html lang="en" >
<head>
  <style>

    body {
        background-color: #2b2934;
    }
            @keyframes slideInFromRight {
                0% {
                    transform: translateX(100%);
                    opacity: 0;
                }

                100% {
                    transform: translateX(0);
                    opacity: 100%;
                }
            }

            @keyframes slideItToLeft {
                0% {
                    transform: translateX(0);
                    opacity: 100%;
                }

                100% {
                    transform: translateX(-100%);
                    opacity: 0;
                }
            }

            .appear-animation {
                animation: slideInFromRight 0.5s ease-out;
            }

            .dissapear-animation {
                animation: slideItToLeft 0.5s ease-in;
            }

            [data-component="slideshow"] .slide {
                display: none;
                text-align: center;
                position: absolute;
            }

            [data-component="slideshow"] .slide.active {
                display: block;
            }
</style>

</head>
<body>

<button onclick="changeImg();">Next</button>

    <div id="slideshow-example" data-component="slideshow">
        <div role="list">
            <div class="slide">
                <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
            </div>
            <div class="slide">
                <img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
            </div>
            <div class="slide">
                <img src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
            </div>
        </div>
    </div>


    <script>
        let slideshows = document.querySelectorAll('[data-component="slideshow"]');
            
        
        let index = 0;

        slideshows.forEach(initSlideShow);

        function initSlideShow(slideshow) {
            globalThis.slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`);
            slides[index].classList.add('active');
        };


            function changeImg() {
                slides[index].classList.add('dissapear-animation');

                var dissapear = slides[index];
                
                dissapear.addEventListener('animationend', () => {
                    dissapear.classList.remove('active');
                    dissapear.classList.remove('dissapear-animation');
                });
            

                
                index++;
                if (index == slides.length) {
                    index = 0;
                };

                slides[index].classList.add('active');
                slides[index].classList.add('appear-animation');

                var appear = slides[index];

                appear.addEventListener('animationend', () => {
                    appear.classList.remove('appear-animation');
                });

            };
    </script>

</body>
</html>

Answer 1

您的问题可以在第一个 animationend 侦听器的 changeImg 函数中找到：

dissapear.addEventListener('animationend', () => {
    dissapear.classList.remove('active');
    dissapear.classList.remove('dissapear-animation');
});

事件侦听器永久侦听事件，而不仅仅是在函数范围内。目前，您的代码每次 active class 都会删除 animationend 事件。解决方案是使用 addEventListener 的 once property。以下代码按预期工作：

dissapear.addEventListener('animationend', () => {
    dissapear.classList.remove('active');
    dissapear.classList.remove('dissapear-animation');
}, { once: true });

为了防止添加过多的侦听器，您还应该将 once 属性添加到另一个侦听器。

appear.addEventListener('animationend', () => {
    appear.classList.remove('appear-animation');
}, { once: true });

重置后滑动动画停止正常工作

Slide animation after resetting stop working correctly

javascript

css

css-animations