p元素的Javascript不透明度过渡答案

【问题标题】：Javascript Opacity transition for p elementp元素的Javascript不透明度过渡
【发布时间】：2020-04-08 10:45:38
【问题描述】：

我在 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);

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

【问题讨论】：

【解决方案1】：

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

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');
});

点击按钮显示/隐藏文本。

【讨论】：

【解决方案2】：

删除hidden 属性。

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

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

【讨论】：