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

Потребуется небольшое знание 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 определяем состояние - либо элемент виден, либо нет. Ну и вызываем наши готовые функции.

Заключение

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