Rewriting jQuery fadeIn into Javascript

Question

I am currently using jQuery inside a Javascript function. For practice purposes I am trying to use vanilla Javascript throughout my entire project. However I cannot figure out how to rewrite the jQuery in regular Javascript.

What I currently understand what the jQuery line in my code does is that the style of text is set to display: none . Afterwards the appendTo sets the innerHTML of the class .square-text . Then fadeIn is used which I cannot place at all... I always thought that animation between display states is impossible?

Current JS code:

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

Answer 1

JsFiddle

You can use css transitions for fading in or out. Basically something like:

 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>