CODEWITHSUNDEEP
javascripthtmlcsscss-transitions
Nick
Nick

Reputation: 674

How to use transition property?

I created a "slideshow" of images that change every 5 seconds using javascript. I would like to add a transition effect to change the opacity from 0.2 -> 0.8 using javascript. I don't think I fully understand how the transition property works.

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;

I was originally setting the opacity to 0.2 in my JavaScript code then as I switch to display the next image I change the opacity to 0.8. Inside my CSS I have a class called image-container__slides--fade and that's where I call the transition property.

Upvotes: 0

Views: 95

Answers (1)

Richard Hunter
Richard Hunter

Reputation: 2180

Edit these lines of your code as such:

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

The problem is that when the browser sees a series of write operations, such as the setting of a CSS property, for efficiency, it will batch these up and apply them together before it reflows the page. In your code, when you set the opacity to 0.2, and then set it to 0.8, the browser only sets it to the latter value, and so no animation takes place.

The way to fix this is to force the browser to do a reflow between setting these two values. This is what document.body.offsetHeight does. Because this is a read operation, the browser needs to reflow the page in order to acquire this information. (note that any read operation would work as well).

Once you do this, you will see your transition working. You can see a slightly edited version of your code with the working effect here

Upvotes: 1

Related Questions