FadeIn и FadeOut на чистом JS

Что потребуется

Потребуется небольшое знание JS, а также смекалка. Давайте разбираться, но сперва — простейший HTML и CSS.

<button class="btn">Нажми!</button>
<div class="block">Далеко-далеко, за словесными горами в стране
  гласных и согласных живут рыбные тексты
</div>

.block {
  display: none;
}

По сути, у нас есть кнопка, которая будет скрывать\раскрывать блок, а также стиль, который делает скрытым блок по умолчанию. А теперь самое интересное — JS. Сперва сделаем функцию FadeIn.

FadeIn

const fadeIn = (el, timeout, display) => {
  el.style.opacity = 0;
  el.style.display = display || 'block';
  el.style.transition = `opacity ${timeout}ms`;
  setTimeout(() => {
    el.style.opacity = 1;
  }, 10);
};

Пройдемся по коду. На самом деле он максимально простой.

1. Создаем функцию с тремя параметрами — передаем сам элемент, время задержки, а также дисплей, который мы хотим получить после того, как блок появится. Кстати, классический fadeIn из jQuery, насколько я знаю, так не умеет.
2. Явно устанавливаем опасити в 0, чтобы потом была возможность сделать из нуля — единицу.
3. Ставим блоку значений block, или то, которое передадим в саму функцию.
4. Устанавливаем транзишн, с которым мы хотим менять плавность у блока. За это отвечает переменная timeout.
5. И далее, через небольшую задержку, которую человек даже и не заметит, ставим блоку опасити 1.

Тем самым, функция сперва внешне скрывает элемент, затем делает ему дисплей блок (при этом элемент все еще будет внешне не виден, ведь опасити 0), а потом, через микро-задержку ставим опасити 1 с тем временем, которое мы задали собственноручно.

Теперь займемся функцией fadeOut.

FadeOut

const fadeOut = (el, timeout) => {
  el.style.opacity = 1;
  el.style.transition = `opacity ${timeout}ms`;
  el.style.opacity = 0;

  setTimeout(() => {
    el.style.display = 'none';
  }, timeout);
};

Здесь ситуация обратная. Сперва явно ставим опасити 1, меняем на 0 с тем же временем, которое нам надо. А вот потом, чтобы опасити успел отработать как надо, мы используем setTimeout с тем же временем, что и анимация опасити. Так выходит, что сперва меняется опасити, а уже потом элемент пропадает из потока, т. к. применяется display: none.

Запуск

Остался запуск кода. Здесь будет простой клик на элемент, которой запускает то FadeIn, то FadeOut.

const block = document.querySelector('.block');
const btn = document.querySelector('.btn');

let flag = false;

btn.addEventListener('click', (e) => {
  if (!flag) {
    fadeIn(block, 1000, 'flex');
    flag = true;
  } else {
    fadeOut(block, 1000);
    flag = false;
  }
});

Здесь все просто — делаем клик, и с помощью переменной flag определяем состояние — либо элемент виден, либо нет. Ну и вызываем наши готовые функции.

Заключение

Надеюсь, данная статья была вам полезна. Если же вам интересна видео-версия — в начале статьи есть видео, переходите и смотрите! До скорого!