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

Question

[Максим Иванов]

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

Comments

[Steppp]

А в чем сложность не делать display: none; ?
Сделать класс active в котором будет анимация, и добавлять удалять класс, заместо вот таких стилей x[currentTab].style.display = "none";

Answer 1

[Ivan Bogachev]

Свойство display- не анимируемое. С ним ничего не сделать. Можно плавно менять opacity от 1 до 0 и добавлять pointer-events: none, чтобы элементы уходили из под мыши и с ними нельзя было взаимодействовать. Ну и, раз у вас скрипты используются для этого - в конце анимации, когда уже элементы не видны, можно добавить display: none, если на это свойство что-то еще завязано. При появлении - все в обратную сторону - pointer-events: auto и возвращаем opacity.

Можно все то же самое делать в CSS, из скриптов только классы дергать - это будет более удобным решением для дальнейшей поддержки (когда много CSS меняется в скриптах - обычно начинаются сложности с пониманием происходящего и вынужденное перебивание стилей).

Answer 2

[Pavstyuk]

Это можно сделать на jQuery легко.
https://www.w3schools.com/jquery/jquery_fade.asp

Comments

[Максим Иванов]

зачем мне jq если я его не использую и зачем этот бесполезный ответ кидать в ответ (извиняюсь за тофтологию)

[Pavstyuk]

Максим Иванов, Это работающий ответ на ваш вопрос. Не знал, что jq перестал быть js.

[Максим Иванов]

Pavstyuk, ну если у меня код написан на ваниле, тогда зачем мне переписывать его на jq?

[Ankhena]

Максим Иванов, Этот ответ вполне пригодится тем, у кого в проекте уже по какой-то причине есть JQ