Question

我目前在Javascript函数中使用jQuery。出于实践目的，我试图在整个项目中使用香草Javascript。但是我不知道如何用常规Javascript重写jQuery。

我目前了解我的代码中jQuery行的作用是将text的样式设置为display: none。然后，appendTo设置类innerHTML的{{1}}。然后使用.square-text，我根本无法放置...我一直认为fadeIn状态之间的动画是不可能的？

当前JS代码：

display

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>

将jQuery fadeIn重写为Javascript

1 个答案: