图片 Slider 淡入 Animation

Question

I'm working on an image slider for one of my project and I'm stuck here - every time I click on the thumbnail image the main image has to appear with some fade-in animation. Do know where I'm doing wrong. First time when the page loads then the class "fadein" is being applied but after it stays intact the fadein doesnt work. Any clue?

HTML

 var el = document.getElementById("ImageSlider"); //var removefadein = document.querySelector(".fade-in"); function imgSlider(newimage) { el.src = newimage; //el.classList.add("fade-in"); } //el.delay('5000').classList.remove("fade-in"); //removefadein.classList.remove("fade-in");

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Nunito', sans-serif; font-size: 18px; } h1, h2, h3, h4, h5, h6 { font-family: 'Noto Serif', serif; } section { position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } section #ImageSlider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } section ul.thumbnails { position: absolute; bottom: 50px; left: 50%; display: flex; transform: translateX(-50%); justify-content: center; align-items: center; list-style: none; z-index: 999; } section ul.thumbnails li { margin: 1em; cursor: pointer; } section ul.thumbnails li img { border: 2px solid black; max-height: 5em; padding: 0; margin: 0; }.fade-in { animation: fadein 4s; -moz-animation: fadein 4s; /* Firefox */ -webkit-animation: fadein 4s; /* Safari and Chrome */ -o-animation: fadein 4s; /* Opera */ } @keyframes fadein { from { opacity:0; } to { opacity:1; } }

 <section> <img class="fade-in" src="https://via.placeholder.com/1980" alt="Image Title" id="ImageSlider"> <ul class="thumbnails"> <li onclick="imgSlider('https://via.placeholder.com/1980')"><img src="https://via.placeholder.com/150" alt="Thumb 1"></li> <li onclick="imgSlider('https://via.placeholder.com/1980/ff3256')"><img src="https://via.placeholder.com/150/ff3256" alt="Thumb 2"></li> </ul> </section>

Answer 1

Not quite sure about logic behind this, but here is a working fix: maybe someone else can explain it better.

fix logic is that you have to on click:

1. get element again
2. check opacity, if its bigger then 0 set it back to 0
3. remove fade class and re-apply it with slight delay (it can not be in same time as removing to take effect)

I think your problem is that you have visible element from 0-1 on load. Then you didn't set it back to 0, your animation class does not do that, it just say to animate from 0 to 1, but there was no starting opacity 0 to start from.

 var el = document.getElementById("ImageSlider"); function imgSlider(newimage) { el = document.getElementById("ImageSlider"); el.src = newimage; console.clear(); console.log(window.getComputedStyle(el).opacity); if (window.getComputedStyle(el).opacity > 0) { console.log(true); el.style.opacity = 0; el.classList.remove("fade-in"); setTimeout(function() { el.classList.add("fade-in"); el.style.opacity = 1; }, 100); } }

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Nunito', sans-serif; font-size: 18px; } h1, h2, h3, h4, h5, h6 { font-family: 'Noto Serif', serif; } section { position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } section #ImageSlider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } section ul.thumbnails { position: absolute; bottom: 50px; left: 50%; display: flex; transform: translateX(-50%); justify-content: center; align-items: center; list-style: none; z-index: 999; } section ul.thumbnails li { margin: 1em; cursor: pointer; } section ul.thumbnails li img { border: 2px solid black; max-height: 5em; padding: 0; margin: 0; }.fade-in { animation: fadein 4s; -moz-animation: fadein 4s; /* Firefox */ -webkit-animation: fadein 4s; /* Safari and Chrome */ -o-animation: fadein 4s; /* Opera */ } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

 <section> <img class="fade-in" src="https://via.placeholder.com/1980" alt="Image Title" id="ImageSlider"> <ul class="thumbnails"> <li onclick="imgSlider('https://via.placeholder.com/1980')"><img src="https://via.placeholder.com/150" alt="Thumb 1"></li> <li onclick="imgSlider('https://via.placeholder.com/1980/ff3256')"><img src="https://via.placeholder.com/150/ff3256" alt="Thumb 2"></li> </ul> </section>