Как сделать табы с плавным переходом на JS?

Question

[madnessi]

Можно ли тут как-то применить опасити или как-то через css? Я новичок, не могу разобраться, помогите, пожалуйста.

document.querySelector('#one-tab').onclick = function(){
document.getElementById('one-tab').className = 'active-tab';
document.getElementById('two-tab').className = 'tab';
document.getElementById('content-one').style.display = 'block';
document.getElementById('content-two').style.display = 'none';
}
document.querySelector('#two-tab').onclick = function(){
document.getElementById('one-tab').className = 'tab';
document.getElementById('two-tab').className = 'active-tab';
document.getElementById('content-one').style.display = 'none';
document.getElementById('content-two').style.display = 'block';
}

Answer 1

[trushka]

Для плавного перехода используйте transition. Только тогда вместо display: none для неактивных табов используйте visibility: hidden. Но там ещё могут возникнуть проблемы из-за разной высоты табов.. Но можно решить, например, установив overflow: hidden и менять высоту скрытым табам. Опять же, можно задать transition: all .3s, height 0s, а для скрытого состояния (задаём, например с помощью класса .hidden) transition: all .3s, height 0s .5s, - при скрытии "схлопнется" после затухания...
А ещё, можно вообще организовать переключение без скрипта, а с использованием псевдокласса :target. Только тогда лучше якоря скрывать с помощью display: none, чтоб страница к ним не прокручивалась, а для показывания-скрытия нужных блоков и подсвечивания активных табов использовать соседские селекторы

Answer 2

[Владислав]

Манипулируйте классами. Просто добавляйте/убирайте класс у блока и этот класс стилизируйте в css как хотите. Прозрачность, трансформацию...