为我准备好的幻灯片添加淡入淡出动画

Question

what im trying to do is to make my slideshow do some animation while changing photos, i have the very basic slide show

<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>

this is the 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>

i have found an article on how to make the fade animation but its complicated and i have no luck with it https://cobwwweb.com/simple-looping-crossfade-image-slideshow this is the exact animation i want.

Answer 1

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
}