css transition animation not working. how to I fix?-CodePudding

I want to add a transition animation while image is changing. But transition doesn't work. As if no transition animation has been added How transition style does work in this case? ( If there is way to from left to right animation like image strip, it will be better than ease animation )

Js, Css, Html codes :

var slides = document.querySelectorAll('.slide');
var next = document.getElementById('next');
var back = document.getElementById('back');
let currentSlide = 0;

var manualNav = function(manual) {
  slides.forEach((slide) => {
    slide.classList.remove('active');
  });
  slides[manual].classList.add('active');
}
next.addEventListener('click', function() {
  if (currentSlide != slides.length - 1) {
    currentSlide  ;
    manualNav(currentSlide);
  }
})
back.addEventListener('click', function() {
  if (currentSlide != 0) {
    currentSlide--;
    manualNav(currentSlide);
  }
})
var repeat = function(activeClass) {
  let active = document.getElementsByClassName('active');
  let i = 1;
  var repeater = () => {
    setTimeout(function() {
      [...active].forEach((activeSlide) => {
        activeSlide.classList.remove('active');
      });
      slides[i].classList.add('active');
      i  ;
      if (slides.length == i) {
        i = 0;
      }
      if (i >= slides.length) {
        return;
      }
      repeater();
    }, 10000);
  }
  repeater();
}
repeat();

.gallery {
  width: 50%;
  height: 340px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.gallery .content {
  position: relative;
  width: 564px;
  height: 297px;
}

.gallery .content .slide {
  display: none;
  transition: all 1s ease-in;
}

.gallery .content .slide img {
  width: 100%;
  height: 297px;
  object-fit: cover;
}

.gallery .content .slide.active {
  display: block;
}

.gallery .content .firstSvg {
  position: absolute;
  right: 80px;
  bottom: 24px;
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-color: orange;
}

.gallery .content .lastSvg {
  cursor: pointer;
  position: absolute;
  right: 24px;
  bottom: 24px;
  height: 50px;
  width: 50px;
  background-color: wheat;
}

<div  id="gallery">
  <div >
    <div >
      <img src="https://i.picsum.photos/id/250/536/354.jpg?hmac=qb3khzryKWU1ECPob2_1mYZLumW5eJTLSmhJzi1VVSI" alt="gallery">
    </div>
    <div >
      <img src="https://i.picsum.photos/id/868/536/354.jpg?hmac=ZcbB7ABIgl6LS5B1wxkzJ_dxJFgNmCsODUTfxM5GdRk" alt="gallery">
    </div>
    <div >
      <img src="https://i.picsum.photos/id/441/536/354.jpg?hmac=qHaUqO3vqlz-C811TXJPtRw-FV4ciRCazlDZb1gdodg" alt="gallery">
    </div>
    <div  id="back">back</div>
    <div  id="next">next</div>
  </div>
</div>

CodePudding user response：

var slides = document.querySelectorAll('.slide');
var next = document.getElementById('next');
var back = document.getElementById('back');
let currentSlide = 0;

var manualNav = function(manual) {
  slides.forEach((slide) => {
    slide.classList.remove('active');
  });
  slides[manual].classList.add('active');
}
next.addEventListener('click', function() {
  if (currentSlide != slides.length - 1) {
    currentSlide  ;
    manualNav(currentSlide);
  }
})
back.addEventListener('click', function() {
  if (currentSlide != 0) {
    currentSlide--;
    manualNav(currentSlide);
  }
})
var repeat = function(activeClass) {
  let active = document.getElementsByClassName('active');
  let i = 1;
  var repeater = () => {
    setTimeout(function() {
      [...active].forEach((activeSlide) => {
        activeSlide.classList.remove('active');
      });
      slides[i].classList.add('active');
      i  ;
      if (slides.length == i) {
        i = 0;
      }
      if (i >= slides.length) {
        return;
      }
      repeater();
    }, 10000);
  }
  repeater();
}
repeat();

.gallery {
  width: 50%;
  height: 340px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.gallery .content {
  position: relative;
  width: 564px;
  height: 297px;
}

.gallery .content .slide {
  height: 0;
  width: 0;
  opacity: 0;
  transition: all 1s ease-in;
}

.gallery .content .slide img {
  width: 100%;
  height: 297px;
  object-fit: cover;
}

.gallery .content .slide.active {
  height: 100%;
  width: 100%;
  opacity: 1;
}

.gallery .content .firstSvg {
  position: absolute;
  right: 80px;
  bottom: 24px;
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-color: orange;
}

.gallery .content .lastSvg {
  cursor: pointer;
  position: absolute;
  right: 24px;
  bottom: 24px;
  height: 50px;
  width: 50px;
  background-color: wheat;
}

<div  id="gallery">
  <div >
    <div >
      <img src="https://i.picsum.photos/id/250/536/354.jpg?hmac=qb3khzryKWU1ECPob2_1mYZLumW5eJTLSmhJzi1VVSI" alt="gallery">
    </div>
    <div >
      <img src="https://i.picsum.photos/id/868/536/354.jpg?hmac=ZcbB7ABIgl6LS5B1wxkzJ_dxJFgNmCsODUTfxM5GdRk" alt="gallery">
    </div>
    <div >
      <img src="https://i.picsum.photos/id/441/536/354.jpg?hmac=qHaUqO3vqlz-C811TXJPtRw-FV4ciRCazlDZb1gdodg" alt="gallery">
    </div>
    <div  id="back">back</div>
    <div  id="next">next</div>
  </div>
</div>

Animations don't work with display property

When you are trying to change display: none; to display:block when a silde is active, browser won't recognise this as a transition event hence nothing happens.

Instead you can try using the changes below to create a fade in animation

Changes

    .gallery .content .slide {
      height: 0;
      width: 0;
      opacity: 0;
      transition: all 1s ease-in;
    }

    .gallery .content .slide.active {
      height: 100%;
      width: 100%;
      opacity: 1;
    }

Initially silde do not have height,width,opacity which makes them 'invisible'.

But when silde is set toactive the above 3 properties are changed and that triggers an animation which in this case is transition: all 1s ease-in;