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'的类）。然后单击只需删除并再次添加相同的类。另外，在添加类之前不要忘记使用offsetWidth来使用trigger a reflow。

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>