Всем привет, есть вот такой таб. Почему-то для основного текста не применяется свойство transition. При переключении на другую вкладку. В чем может быть проблема?
var btnContainer = document.getElementById("tabs__items");
var btns = btnContainer.getElementsByClassName("tabs__link");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
.advantages__tabs {
display: flex;
border: 2px solid #30d5c8;
padding: 10px;
min-height: 450px;
flex: 0 1 50%;
}
.tabs__items {
display: flex;
flex-direction: column;
justify-content: center;
white-space: nowrap;
}
.tabs__link {
align-items: left;
text-transform: uppercase;
font-size: 18px;
color: #3b96df;
padding: 20px;
transition: all 0.3s ease 0s;
}
.tabs__link.active {
color: #18d1c2;
}
.tabs__body {
margin: auto 0;
}
.tabs__block {
display: none;
text-align: justify;
padding: 20px;
font-size: 18px;
line-height: 24px;
}
.tabs__block:target {
display: flex;
justify-content: center;
align-self: center;
align-items: center;
flex-direction: row;
transition: all 1s ease 1s;
}
<div class="advantages-content">
<div class="advantages__tabs">
<nav class="tabs__items" id="tabs__items">
<a href="#tab_01" class="tabs__link active">Первое преимущество</a>
<a href="#tab_02" class="tabs__link">Второе преимущество</a>
<a href="#tab_03" class="tabs__link">Третье преимущество</a>
<a href="#tab_04" class="tabs__link">Четвертое преимущество</a>
<a href="#tab_05" class="tabs__link">Пятое преимущество</a>
</nav>
<div class="tabs__body">
<div id="tab_01" class="tabs__block">Первая вкладка. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam enim similique reiciendis earum, ipsa quo. Atque quas, illo asperiores sequi corporis animi deleniti veritatis, nam dignissimos eaque
</div>
<div id="tab_02" class="tabs__block">Вторая вкладка. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div id="tab_03" class="tabs__block">Третья вкладка. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam enim similique reiciendis earum, ipsa quo. Atque quas, illo asperiores sequi corporis animi deleniti veritatis, nam dignissimos eaque, optio adipisci!
</div>
<div id="tab_04" class="tabs__block">Четвертая вкладка
</div>
<div id="tab_05" class="tabs__block">Пятая вкладка.
</div>
</div>
</div>
</div>
.tabs__link
всё работает, а у.tabs__block
нет анимируемых свойств.