Javascript p 元素的不透明度过渡

Question

我在 HTML 代码中有一个 p 元素

<p id="errorEmailMsg" hidden>Wrong Mail</p>

在 javascript 中，我想做一个过渡，它在 1 秒内将不透明度从 0 更改为 1。我尝试做类似

的事情

   errorMessage.style.opacity = 0;

        setTimeout(() => {
         errorMessage.style.opacity = 1;
          }, this.animationDelay + 20);

我怎样才能做到这一点？谢谢你，祝你有美好的一天:)

Answer 1

删除 hidden 属性。

如果您希望元素在默认情况下不可见，请使用。

<p id="errorEmailMsg" style="opacity: 0">Wrong Mail</p>

Answer 2

我已经创建了一个具有这种效果的演示：

HTML

<p class="p">Some text</p>

<button class="button">Hide it</button>

CSS

.p {
  opacity: 1;

  transition: opacity 1s;
}

.p.hidden {
  opacity: 0;
}

JavaScript

document.querySelector('.button').addEventListener('click', e => {
  document.querySelector('.p').classList.toggle('hidden');
});

单击按钮以 show/hide 文本。

Javascript Opacity transition for p element