javascript - 将 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 transitions用于淡入或淡出。基本上是这样的:

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>