Javascript p 元素的不透明度過渡

Question

我在 HTML 代碼中有 ap 元素

<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

我創建了一個具有這種效果的演示：

https://codepen.io/jordyvd/pen/yLYBvbx

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

單擊按鈕以顯示/隱藏文本。