css過渡影片不起作用。我該如何解決？

我想在影像更改時添加過渡影片。但是過渡不起作用。好像沒有添加過渡影片在這種情況下過渡樣式如何作業？（如果有像影像條這樣的從左到右影片的方法，那會比緩動影片更好）

Js、Css、Html 代碼：

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 class="gallery" id="gallery">
  <div class="content">
    <div class="slide active">
      <img src="https://i.picsum.photos/id/250/536/354.jpg?hmac=qb3khzryKWU1ECPob2_1mYZLumW5eJTLSmhJzi1VVSI" alt="gallery">
    </div>
    <div class="slide">
      <img src="https://i.picsum.photos/id/868/536/354.jpg?hmac=ZcbB7ABIgl6LS5B1wxkzJ_dxJFgNmCsODUTfxM5GdRk" alt="gallery">
    </div>
    <div class="slide">
      <img src="https://i.picsum.photos/id/441/536/354.jpg?hmac=qHaUqO3vqlz-C811TXJPtRw-FV4ciRCazlDZb1gdodg" alt="gallery">
    </div>
    <div class="firstSvg" id="back">back</div>
    <div class="lastSvg" id="next">next</div>
  </div>
</div>

uj5u.com熱心網友回復：

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 class="gallery" id="gallery">
  <div class="content">
    <div class="slide active">
      <img src="https://i.picsum.photos/id/250/536/354.jpg?hmac=qb3khzryKWU1ECPob2_1mYZLumW5eJTLSmhJzi1VVSI" alt="gallery">
    </div>
    <div class="slide">
      <img src="https://i.picsum.photos/id/868/536/354.jpg?hmac=ZcbB7ABIgl6LS5B1wxkzJ_dxJFgNmCsODUTfxM5GdRk" alt="gallery">
    </div>
    <div class="slide">
      <img src="https://i.picsum.photos/id/441/536/354.jpg?hmac=qHaUqO3vqlz-C811TXJPtRw-FV4ciRCazlDZb1gdodg" alt="gallery">
    </div>
    <div class="firstSvg" id="back">back</div>
    <div class="lastSvg" id="next">next</div>
  </div>
</div>

影片不適用于display屬性

當您嘗試更改display: none;silde display:blockis 時active，瀏覽器不會將其識別為轉換事件，因此沒有任何反應。

相反，您可以嘗試使用下面的更改來創建淡入影片

變化

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

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

最初 silde 沒有height, width，opacity這使它們“不可見”。

但是當 silde 設定為active上述 3 個屬性時，會觸發一個影片，在這種情況下是transition: all 1s ease-in;

標籤：javascripthtmlcss粗鲁的

上一篇：影片不適用于Safari和移動設備

下一篇：JavaScript和CSS中ID的目標子div