JS-решения №19. FadeIn, FadeOut на чистом JS

Привет! Не так давно сразу несколько подписчиков попросили рассказать, как же можно сделать плавное скрытие или показ элемента через js, без всяких плагинов и jQuery. Решил записать ролик на эту тему, приятного просмотра :)
Один из вариантов: gist.github.co...
Код урока: github.com/max...
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxg...
Чат для верстальщиков: teleg.run/maxg...
#ityoutubersru #fadeIn #vanillajs

[@user-dv9fk1hd3s]

Свойство style у DOM-элемента работает только для стилей, которые прописаны инлайново (то есть прямо в html). Стили, которые прописаны в css (даже если css тут же в теге не будут доступны для чтения). Чтобы получить стиль, заданный через css нужно использовать getComputedStyle у window. Например для свойства display нужно написать let display = window.getComputedStyle(block).display; и уже потом проверять if (display == 'none') {какой-то код}

[@m_mariya_mari]

добрый день. так хочется впитать всю ту полезность, кот вы даете. Спасибо огромное! желаю вам побольше подписчиков - некоторые материалы просто уникальны. 👍

[@maxgraph]

Спасибо)

[@alekssjeva951]

В FadeIn() setTimeout задержку можно писать 0 - всё равно внутри его код выполнится позже, чем произойдёт изменение свойства display.

[@web-impuls]

проще уж классы в css создать, и в элементе переключать их В твоём случае, можно скэйл применить, что бы прыжков не было. А вообще, что бы от js уйти в простых случаях, можно в лейбл оборачивать. и по скрытому полю делать то или иное действие в css

[@alexdev75]

Отличное решение. Просто и классно.

[@dmitrogritselyak7593]

Спасибо, Макс!)))

[@maxgraph]

Пожалуйста)

[@dim271072]

Максим, а как это можно применить к нескольким кнопкам и скрытым блокам?

[@maxgraph]

Для каждой написать

[@dim271072]

@@maxgraph я попробовал дать разные классы и перечислить их в js коде через запятую-но так не работает.

[@user-ci9xs8gs9k]

Как мне реализовать? У меня есть 4 таба и мне нужно при нажатии на таб, чтоб старый блок плавно затухал, а новый появлялся? Можно их как то совместить?

[@development76]

Маским,спасибо что держишь слово,но просьба была в смене блоков по табу....что бы по клику менялся блок на другой плавно...

[@maxgraph]

Ну теперь примените функцию, передав в неё нужный элемент.

[@user-yi9pq3th4o]

Спасибо!!!

[@maxgraph]

Пожалуйста))

[@miraigrafit7865]

Я обычно анимейт использую, а потом подписуюсь на событие финиш и делаю дисплейн нон, но как понимаю анимейт не везде поддержуется.

[@maxgraph]

Да, не везде)