將jQuery fadeIn重寫為Javascript

Question

我目前在Javascript函數中使用jQuery。 出於實踐目的，我試圖在整個項目中使用香草Javascript。 但是我不知道如何用常規Javascript重寫jQuery。

我目前了解我的代碼中jQuery行的作用是將text樣式設置為display: none 。 然后， appendTo設置類.square-text的innerHTML 。 然后使用了我根本無法放置的fadeIn ...我一直認為display狀態之間的動畫是不可能的？

當前的JS代碼：

function transitionText(text){
  squareText.innerHTML = ""
  $(text).hide().appendTo(".square-text").fadeIn(800);
}

Answer 1

JsFiddle

您可以使用css過渡淡入或淡出。 基本上像這樣：

 document.querySelector("button").addEventListener("click", doFade); function doFade() { const fadeInOut = document.querySelector("#fade"); const faderClass = "fadeout"; if (fadeInOut.classList.contains(faderClass)) { fadeInOut.classList.remove(faderClass); } else { fadeInOut.classList.add(faderClass); } } 

 #fade { opacity: 1; transition: opacity linear 0.8s 0s; } #fade.fadeout { opacity: 0; transition: opacity linear 0.8s 0s; } 

 <div id="fade">Something to fade in or out</div> <p><button>FadeInOut</button></p>