将淡入淡出的动画添加到我准备好的幻灯片中

问题描述

我想做的是让我的幻灯片在改变照片的同时做一些动画，我有非常基本的幻灯片

<div class="slider-wrapper">
<div class="slider-wrapper-item " style="background-image: url(/wp-content/themes/ETL/img/slider-image-1.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-2.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-3.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-4.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-5.jpg);"></div>
<div class="slider-play-icon"><img src="/wp-content/themes/ETL/img/play-arrow-grey.png"></div>

这是js

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slider-wrapper-item");
  console.log("slides",slides);
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  slides[slideIndex-1].style.display = "block";  
  setTimeout(showSlides,5000); // Change image every 2 seconds
}
</script>

我找到了一篇有关如何制作淡入淡出动画的文章，但它很复杂，我对此并不满意https://cobwwweb.com/simple-looping-crossfade-image-slideshow 这是我想要的确切动画。

解决方法

if you want animation you can't use display none or block because display property does not support transition.
don't use this 
slides[i].style.display = "none" and slides[slideIndex-1].style.display = "block"; 
instead of that make class for animation and add that class and remove whenever you want.

for example
 
.addAnimation{
 // write your code here
}
.removeAnimation{
 // write your code here
}