Javascript Непрозрачность перехода для элемента p

Question

У меня есть элемент ap в HTML Код, подобный

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

В javascript Я хочу сделать переход, где он изменяет непрозрачность с 0 до 1 за 1 секунду. Я пытался сделать что-то вроде

   errorMessage.style.opacity = 0;

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

Как мне этого добиться? Спасибо и хорошего дня:)

Answer 1

Я создал демо с этим эффектом:

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

Нажмите на кнопку, чтобы показать / скрыть текст.

Я предлагаю вам взглянуть на CSS переходы: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Answer 2

Удалить атрибут hidden.

Если вы хотите, чтобы элемент был невидимым по умолчанию, используйте.

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