如何在香草js中慢慢显示元素？我主要担心的是慢慢地展示这个元素

Question

如何在vanilla js中编写$（“。className”）。show（“slow”）？我主要担心的是慢慢显示这个元素。

like this in jquery

Answer 1

你想要某种淡化效果吗？您可以尝试使用CSS过渡来改变不透明度。看一下这个JSFiddle。您可以通过更改转换所需的时间来使其更慢/更快。

HTML：

<p id="my-para">Hello, my name is John</p>
<button id="btn">Show Element</button>

CSS：

p {
    opacity: 0;
}

.fade-in {
    opacity: 1;
    transition: opacity .9s ease;
}

JS：

var btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  document.getElementById('my-para').classList.add('fade-in');
});