@mikilikala
На фронте

Как можно с помощью js сделать анимацию исчезновения и появления блоков с учётом того, что у блоков “tab” display: none;?

Как можно с помощью js сделать анимацию исчезновения и появления блоков с учётом того, что у блоков “tab” display: none;?
  • Вопрос задан
  • 564 просмотра
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Свойство display- не анимируемое. С ним ничего не сделать. Можно плавно менять opacity от 1 до 0 и добавлять pointer-events: none, чтобы элементы уходили из под мыши и с ними нельзя было взаимодействовать. Ну и, раз у вас скрипты используются для этого - в конце анимации, когда уже элементы не видны, можно добавить display: none, если на это свойство что-то еще завязано. При появлении - все в обратную сторону - pointer-events: auto и возвращаем opacity.

Можно все то же самое делать в CSS, из скриптов только классы дергать - это будет более удобным решением для дальнейшей поддержки (когда много CSS меняется в скриптах - обычно начинаются сложности с пониманием происходящего и вынужденное перебивание стилей).
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Pavstyuk
Это можно сделать на jQuery легко.
https://www.w3schools.com/jquery/jquery_fade.asp
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы