帶漸變的幻燈片 animation

Question

如何調整此代碼以使其不會立即消失？ 換句話說，讓圖像淡入，靜置幾秒鍾然后淡出？

這是我現在的代碼：

    <div id="slideshow-example" data-component="slideshow">
        <div role="list">
            <div class="slide fade">
                <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
            </div>
            <div class="slide fade">
                <img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
            </div>
            <div class="slide fade">
                <img src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
            </div>
        </div>
    </div>

[data-component="slideshow"] .slide {
    display: none;
  text-align: center;
}

[data-component="slideshow"] .slide.active {
    display: block;
}

.fade
{
    -webkit-animation: fadeinout 2s linear forwards;
    animation: fadeinout 2s linear forwards;
}

@-webkit-keyframes fadeinout {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
  }
  
@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

var slideshows = document.querySelectorAll('[data-component="slideshow"]');
slideshows.forEach(initSlideShow);

function initSlideShow(slideshow) {

    var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`);

    var index = 0, time = 5000;
    slides[index].classList.add('active');

    setInterval( () => {
        slides[index].classList.remove('active');
        
        index++;
        if (index === slides.length) index = 0;

        slides[index].classList.add('active');

    }, time);
}

請忽略這部分，StackOverflow 不會讓我發布，因為它“主要是代碼”，即使我無法對我的問題給出更多解釋。 但是，如果您對我的問題感到困惑，請問我，我會嘗試更深入地解釋它。

Answer 1

您可以更改元素顯示的百分比，如下所示：

 var slideshows = document.querySelectorAll('[data-component="slideshow"]'); slideshows.forEach(initSlideShow); function initSlideShow(slideshow) { var slides = document.querySelectorAll(`#${slideshow.id} [role="list"].slide`); var index = 0, time = 5000; slides[index].classList.add('active'); setInterval( () => { slides[index].classList.remove('active'); index++; if (index === slides.length) index = 0; slides[index].classList.add('active'); }, time); }

 [data-component="slideshow"].slide { display: none; text-align: center; } [data-component="slideshow"].slide.active { display: block; }.fade { -webkit-animation: fadeinout 3s linear forwards; animation: fadeinout 2s linear forwards; } @-webkit-keyframes fadeinout { 0%,100% { opacity: 0; } 20%, 80% { opacity: 1; } } @keyframes fadeinout { 0%,100% { opacity: 0; } 20%,50% { opacity: 1; } }

 <div id="slideshow-example" data-component="slideshow"> <div role="list"> <div class="slide fade"> <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt=""> </div> <div class="slide fade"> <img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt=""> </div> <div class="slide fade"> <img src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt=""> </div> </div> </div>

Answer 2

這是使用 async await 語法和一些不同的邏輯對您的項目進行的簡要重寫。

首先，我使用了兩個輔助函數。 一個是簽名$ function 類似於 jQuery，但只是為了從文件中抓取東西做空。 我還允許將另一個元素作為我們從中選擇內容的父元素傳遞，因為我覺得它使代碼更具可讀性。 另一個是類似於 Python 的 sleep的wait function 。 有更好的資源來理解承諾，但簡而言之，任何稱為async function的 function 都將允許await關鍵字“等待” promise

接下來，我使用一個匿名箭頭 function 傳遞，它調用 function 而不是只傳遞 function 的名稱。 我這樣做的原因是明確 state 哪個 arguments 從forEach方法傳遞到我的 function。 如果我們不這樣做，第二個參數slides將被傳遞一個不想要的索引。

在 function initSlideShow內部，我們檢查是否定義了slides ，如果沒有定義它。 這樣我們就不必在每次迭代時使用查詢選擇器來抓取東西，而是可以在遞歸調用中重用以前的值。

我們設置稍后使用的時間

我們開始循環播放每張幻燈片，並首先添加將顯示更改為塊的active 。 我們需要讓 dom 在淡入之前渲染變化，所以我們等待 10 毫秒。 然后我們移除fade class 移除不透明度 0，過渡 css 使其淡入超過 1 秒。

我們等待指定的時間。

我們將漸變 class 添加回元素。

我們等待 animation 時間我們移除活動，這將顯示設置為無。

在我們遍歷所有幻燈片之后，我們只需調用 function 再次傳遞我們已經獲取的幻燈片以再次執行此操作。 一個很好的小遞歸邏輯，可以永遠循環 function。

如果您對代碼有任何疑問，請詢問。

 const $ = (str, dom = document) => [...dom.querySelectorAll(str)]; const wait = t => new Promise(r => setTimeout(r, t)); const slideshows = $('[data-component="slideshow"]'); slideshows.forEach(el => initSlideShow(el)); async function initSlideShow(container, slides) { if (slides == undefined) slides = $('[role="list"].slide', container); const time = 5000; for (const slide of slides) { slide.classList.add("active"); await wait(10); slide.classList.remove("fade"); await wait(time); slide.classList.add("fade"); await wait(1000); slide.classList.remove("active"); } initSlideShow(container, slides); }

 [data-component="slideshow"].slide { display: none; text-align: center; transition: opacity 1s; } [data-component="slideshow"].slide.active { display: block; }.fade { opacity: 0; }

 <div id="slideshow-example" data-component="slideshow"> <div role="list"> <div class="slide fade"> <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt=""> </div> <div class="slide fade"> <img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt=""> </div> <div class="slide fade"> <img src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt=""> </div> </div> </div>

不過，在實際的生產應用程序中，我會做很多不同的事情。 像這樣頻繁地將 display none 更改為 block 可能會使頁面的布局發生不可預測的變化。 我會堅持主要改變不透明度和過渡。 淡出時，可能會在隱藏溢出的容器內滑動元素。