Скрытие элемента с анимацией по событию?

Question

[Михаил Р.]

Написал вкладки, получилось их скрывать по клику, но не получилось прикрутить анимацию появления активной вкладки.

Код на codepen.io...

Для саморазвития хочу прояснить пару моментов:

1. Как правильно прикрутить анимацию появления активной вкладки?
2. Хотелось бы увидеть, как опытные написали бы js код в настоящей задаче...

Код анимации:
Для примера, давайте используем этот вариант анимации...

<!--появление-->
transition: all 0.3s linear 0s;
transform: translate(0, 0);
opacity: 1;
<!--скрытие-->
transition: all 0.3s linear 0s;
transform: translate(0, 50px);
opacity: 0;

Comments

[McBernar]

Если хотите действительно понять JS — забудьте про jQuery. Делайте все на нативном JS.

[Михаил Р.]

McBernar, jQuery позволяет ускорить в разы выполнение рутинных задач, для чего использовать ванильный js, если это можно быстро и просто это реализовать на jQuery?

Answer 1

[0xD34F]

Так, что ли?

Comments

[Михаил Р.]

Почти! Обновил пример на codepen.io, посмотрите, у меня второстепенный блок за табами находится в нормальном положение, а в Вашем примере этот блок уезжает под табы...

[0xD34F]

обновил ответ

[Михаил Р.]

0xD34F, работает, благодарю!

[Михаил Р.]

0xD34F, не могу разобраться, почему при клике на вкладке нас поднимает в начало страницы. https://codepen.io/MikeRo/pen/JvZrpO

[0xD34F]

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

[Михаил Р.]

0xD34F, работает, еще раз огромное спасибо!