與ES6和CSS3淡入淡出

所以我有一個函數，我試圖通過數組創建循環來更新div的innerHTML與JavaScript。我希望在不使用jQuery的fadeIn（）和fadeOut（）的情況下，在每次設置新數據之間將不透明度設置爲0和1。與ES6和CSS3淡入淡出

這是我到目前爲止。我認爲我非常接近，但不知道我在做什麼，稍微偏離。

謝謝！

slide(index, tweets, element) { 
    let self = this; 

    element.innerHTML = data[index].text; 
    element.style.opacity = 1; 

    setTimeout(() => { 
     index++; 
     element.style.opacity = 0; 
     setTimeout(self.slide(index, data, element), 2000); 
    }, 5000); 
}

編輯我忘了添加一個類來我的div這一改變更何況我指望CSS3動畫：

transition: opacity 2s ease-in-out;

來源

2015-11-08 eightonrose

是否有一個原因你不使用CSS 3？既然你指定了ES6，我認爲你的目標是現代瀏覽器。 – 2015-11-08 00:57:50

我正在使用CSS3。對不起，我沒有具體說明。我正在使用'transition：opacity 2s ease-in-out'，但我不能在設置innerHTML之前和之後爲我的生活弄清楚如何觸發它。 – eightonrose

我不知道如何代碼你提供的問題涉及到手頭的問題，但這裏有一個關於如何淡出，改變文本然後淡入的簡單演示。

你應該可以根據你的需要進行擴展。

var d = document.querySelector("div"); 
 

 
window.addEventListener("load", function() { 
 
    d.classList.add("hidden"); 
 
}); 
 

 
var i = 0; 
 

 
d.addEventListener("transitionend", function() { 
 
    if (this.classList.contains("hidden")) { 
 
    i++; 
 
    this.innerHTML = "SUCCESS! ---> " + i; 
 
    } 
 
    this.classList.toggle("hidden"); 
 
});

div { 
 
    opacity: 1; 
 
    transition: opacity 2s; 
 
} 
 

 
div.hidden { 
 
    opacity: 0; 
 
}

<div>LOADING...</div>

它只是增加了hidden類觸發淡出，並將其綁定一個transitionend處理程序，以更改文本和刪除類在褪色。

來源

2015-11-08 01:11:50

我相信這個解決方案提供了比完全依賴JS超時和間隔更好的UX。好答案！ –

所以唯一的問題是我沒有點擊任何東西。這只是一個無限循環，淡入淡出。我會嘗試做這樣的事情，雖然.. – eightonrose

@eightonrose：你只需要加載類（或任何時候）來啓動它，並讓'transitionend'處理程序根據需要刪除或添加類。其實，你可以使用'classList.toggle（「隱藏」）'。 – 2015-11-08 02:15:22

與ES6和CSS3淡入淡出

回答

相關問題