html - CSS3 淡入淡出动画应该有效，但实际上无效

Question

我花了半天时间研究这个问题，但似乎没有解决方案。我正在尝试对在 slideshow-container 中更改的图片制作“淡入淡出”动画。我创建了 fade 作为照片容器。这是 HTML 代码:

changePic() 函数负责换图，效果很好，但还是无法获取淡入淡出效果。您知道这段代码会出现什么问题吗？

var slideIndex = 1;
        showSlides(slideIndex);

        function changePic(n) {
          showSlides(slideIndex += n);
        }

        function currentSlide(n) {
          showSlides(slideIndex = n);
        }

        function showSlides(n) {
            const urls = [
            "https://www.dike.lib.ia.us/images/sample-1.jpg",
            "https://www.dike.lib.ia.us/images/sample-2.jpg",
            "https://www.dike.lib.ia.us/images/sample-3.jpg"
            ];

            var picture = document.getElementById("pic");
            if(n>urls.length){slideIndex = 1}
            if(n<1){slideIndex = urls.length}
            picture.src = urls[slideIndex-1];

        }

.fade {
       -webkit-animation-name: fade;
       -webkit-animation-duration: 1.5s;
       animation-name: fade;
       animation-duration: 1.5s;
       }

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }

<div class="slideshow-container">  
            <div class="fade">
                    <img id="pic">
            </div>

            <a class="prev" onclick="changePic(-1)">Previous</a>
            <a class="next" onclick="changePic(1)">Next</a>
        </div>

Answer 1

您可以在图像上添加动画(我在名为“fadeImage”的图像上添加了类)。然后单击只需删除并再次添加相同的类。 另外，别忘了 trigger a reflow在添加类之前使用 offsetWidth。

picture.classList.remove("fadeImage");
void picture.offsetWidth;
picture.classList.add("fadeImage");

请参阅下面的代码段:

var slideIndex = 1;
        showSlides(slideIndex);

        function changePic(n) {
          showSlides(slideIndex += n);
        }

        function currentSlide(n) {
          showSlides(slideIndex = n);
        }

        function showSlides(n) {
            const urls = [
            "https://www.dike.lib.ia.us/images/sample-1.jpg",
            "https://www.dike.lib.ia.us/images/sample-2.jpg",
            "https://www.dike.lib.ia.us/images/sample-3.jpg"
            ];

            var picture = document.getElementById("pic");
            if(n>urls.length){slideIndex = 1}
            if(n<1){slideIndex = urls.length}
            picture.src = urls[slideIndex-1];
            picture.classList.remove("fadeImage");
            void picture.offsetWidth;
            picture.classList.add("fadeImage");

        }

.fadeImage {
       -webkit-animation-name: fade;
       -webkit-animation-duration: 1.5s;
       animation-name: fade;
       animation-duration: 1.5s;
       }

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }

<div class="slideshow-container">  
            <div class="fade">
                    <img id="pic" class="fadeImage">
            </div>

            <a class="prev" onclick="changePic(-1)">Previous</a>
            <a class="next" onclick="changePic(1)">Next</a>
        </div>