Javascript 如何使用转换属性？

我用javascript创建了一个每5秒更改一次的图像“幻灯片”。我想添加一个过渡效果，使用javascript将不透明度从0.2->0.8更改。我不认为我完全理解transition属性是如何工作的

index.html

我们经验丰富的治疗师将与您一起踏上成长之旅
最好的你自己。
学会认清自己的思维模式，以便更好地控制自己的生活。
学会发展更健康的方式与他人沟通。

CSS

.image-container {
  position: relative;
  & > div img {
    width: 100%;
  }

  &__slides {
    display: none;

    &--fade {
      transition: opacity 1.5s ease-in;
    }
  }

  &--text {
    position: absolute;
    z-index: 5;
    background-color: #333;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: 1.625rem;
    padding-bottom: 1.625rem;
    padding-left: 10px;
    width: 600px;
    color: white;
    border-radius: 3px;
    opacity: 0.8;
    font-size: 1.375rem;
    font-weight: 300;
  }
}

JavaScript

class ImageSlider {
  constructor() {
    this.slides = document.querySelectorAll(".image-container__slides");
    this.slideIndex = 0;
    console.log(this.slides.length);
    this.showSlides();
  }

  showSlides() {
    let i;
    // Display all images as none
    for (i = 0; i < this.slides.length; i++) {
      this.slides[i].style.display = "none";
      this.slides[i].style.opacity = "0.2";
    }
    this.slideIndex++;
    // Check to see if the slideIndex is higher than number of images
    if (this.slideIndex > this.slides.length) {
      this.slideIndex = 1;
    }
    // Assign one image to be displayed
    this.slides[this.slideIndex - 1].style.display = "block";
    this.slides[this.slideIndex - 1].style.opacity = "0.80";
    // Cycle through images every 5 seconds
    setTimeout(() => {
      this.showSlides();
    }, 5000);
  }
}

export default ImageSlider;

类图像滑块{
构造函数（）{
this.slides=document.queryselectoral（“.image-container\uu slides”）；
此.slideIndex=0；
console.log（this.slides.length）；
这是showselides（）；
}
放映幻灯片（）{
让我；
//将所有图像显示为无
对于（i=0；ithis.slides.length）{
此.slideIndex=1；
}
//指定一个要显示的图像
this.slides[this.slideIndex-1].style.display=“block”；
this.slides[this.slideIndex-1].style.opacity=“0.80”；
//每5秒钟浏览一次图像
设置超时（（）=>{
这是showselides（）；
}, 5000);
}
}
导出默认图像滑块；

---

我最初在JavaScript代码中将不透明度设置为0.2，然后当我切换到显示下一幅图像时，我将不透明度更改为0.8。在我的CSS中，我有一个名为“淡入淡出”的类，这就是我调用transition属性的地方。

编辑以下代码行：

    this.slides[this.slideIndex - 1].style.display = "block";
    document.body.offsetHeight; // add this
    this.slides[this.slideIndex - 1].style.opacity = "0.80";

问题是，当浏览器为了提高效率而看到一系列写入操作（如CSS属性的设置）时，它会将这些操作批处理并在重新加载页面之前将它们应用在一起。在代码中，当您将“不透明度”设置为0.2，然后将其设置为0.8时，浏览器仅将其设置为后一个值，因此不会发生动画

解决此问题的方法是强制浏览器在设置这两个值之间进行回流。这就是

document.body.offsetHeight

所做的。由于这是一个读取操作，浏览器需要回流页面以获取此信息。（请注意，任何读取操作都可以工作）

一旦你这样做了，你会看到你的过渡工作。您可以看到稍微编辑过的代码版本，并具有工作效果