如何使用过渡属性？

Question

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

index.html

<div class="image-container">
  <div class="image-container__slides image-container__slides--fade">
    <div class="image-container--text">
      Our experienced therapist will walk with you on your journey to become
      the best version of yourself.
    </div>
    <picture class="image">
      <source srcset="./assets/images/couple-large-hi-dpi.jpg 5168w" media="(min-width: 1380px)" />
      <source srcset="./assets/images/couple-large_1920.jpg 1920w"   media="(min-width: 990px)" />
      <source srcset="./assets/images/couple-medium_1280.jpg 1280w"  media="(min-width: 640px)"/>
      <img src="./assets/images/couple-small_640.jpg" alt="" />
    </picture>
  </div>

  <div class="image-container__slides image-container__slides--fade">
    <div class="image-container--text">
      Learn to recognize your own thought patterns to have more control over your life.
    </div>
    <picture class="image">
      <source srcset="./assets/images/men-large-hi-dpi.jpg 5168w" media="(min-width: 1380px)" />
      <source srcset="./assets/images/men-large_1920.jpg 1920w"   media="(min-width: 990px)" />
      <sourc esrcset="./assets/images/men-medium_1280.jpg 1280w"  media="(min-width: 640px)"/>
      <img src="./assets/images/men-small_640.jpg" alt="" />
    </picture>
  </div>

  <div class="image-container__slides image-container__slides--fade">
    <div class="image-container--text">
      Learn to develope healthier ways to communicate with others.
    </div>
    <picture class="image image--last">
      <source srcset="./assets/images/person-large-hi-dpi.jpg 5168w" media="(min-width: 1380px)" />
      <source srcset="./assets/images/person-large_1920.jpg 1920w"   media="(min-width: 990px)" />
      <source srcset="./assets/images/person-medium_1280.jpg 1280w"  media="(min-width: 640px)"/>
      <img src="./assets/images/person-small_640.jpg" alt="" />
    </picture>
  </div>
</div>

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;

我最初在我的 JavaScript 代码中将不透明度设置为 0.2，然后当我切换到显示下一张图像时，我将不透明度更改为 0.8。在我的 CSS 中，我有一个名为 image-container__slides--fade 的 class，这就是我调用转换属性.

的地方

Answer 1

按如下方式编辑这些代码行：

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

问题是当浏览器看到一系列write操作，比如设置一个CSS属性，为了效率，它将对它们进行批处理并在重排页面之前将它们一起应用。在您的代码中，当您将不透明度设置为 0.2，然后将其设置为 0.8 时，浏览器仅将其设置为后一个值，因此不会发生动画。

解决此问题的方法是强制浏览器在设置这两个值之间进行重排。这就是 document.body.offsetHeight 所做的。因为这是一个 read 操作，所以浏览器需要重排页面以获取此信息。（请注意，任何读取操作都可以正常工作）。

执行此操作后，您将看到转换工作正常。您可以看到您的代码经过稍微编辑后的效果 here

如何使用过渡属性？

How to use transition property?

html

javascript

css

css-transitions