圖片 Slider 淡入 Animation

Question

我正在為我的一個項目處理圖像 slider，但我被困在這里 - 每次我單擊縮略圖圖像時，主圖像都必須出現一些淡入 animation。知道我哪里做錯了。 第一次加載頁面時，將應用 class“淡入淡出”，但在它保持完好無損之后，淡入淡出不起作用。 有什么線索嗎？

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

不太確定這背后的邏輯，但這是一個有效的解決方法：也許其他人可以更好地解釋它。

修復邏輯是你必須點擊：

1. 再次獲取元素
2. 檢查不透明度，如果它大於 0，則將其設置回 0
3. 刪除 fade class 並稍微延遲重新應用它（它不能與刪除同時生效）

我認為你的問題是你在加載時有 0-1 的可見元素。 然后你沒有將它設置回 0，你的 animation class 沒有這樣做，它只是說從 0 到 1 設置動畫，但是沒有起始不透明度 0 開始。

 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>