CODEWITHSUNDEEP
cssimageanimationtransitionfade
Clinton Smith
Clinton Smith

Reputation: 11

How to make an opacity transition start from its current state, even if it's currently being affected by a transition?

I'm creating a slideshow gallery where I want the images to fade in and out when the user presses the next or previous button.

I've gotten this to work using transitions to fade out the old image (image x) and fade in the new image (image y) over a 3 second duration. However, if I spam the next/previous button the new image (image y, that is fading in) will jump from whatever opacity it's at to 100% immediately before fading out.

My question therefore is how do I stop the new image (image y) jumping up to opacity 100% and instead just fade out from its current opacity as the "new new" image (image z) fades in?

Here is my CSS:

.mySlides{
    opacity: 0;
    transition: opacity 3s ease-in;
}


.fade {
    opacity: 1;
}

Then I just have some JS to add or remove the .fade class to the .mySlides element to make it fade in or out:

slides[new_slideIndex].classList.add("fade");
slides[current_slideIndex].classList.remove("fade");

Thanks in advance for any help!

Upvotes: 1

Views: 311

Answers (1)

Dhananjai Pai
Dhananjai Pai

Reputation: 6005

From the code, I am assuming you are removing the fade class of image y before it actually transitions-in causing the error.

You could setTimeout(function() {slides[current_slideIndex].classList.remove("fade")} , 3000) to make sure it is removed after 3 seconds (completing transition) but I am not sure how the results would be and cannot try it out since I don't have all the necessary code - though I believe it could work

Another way would be to prevent the spam, by adding a pointer-events:none property to the next button on click and removing it with a setTimeout 3 seconds later, so that the next button can only be clicked once every 3 seconds ?

Upvotes: 0

Related Questions