Как сделать переключение элементов в скрипте табов плавным?

Question

[Valery23]

Есть html код:

<div id="tabs">

<div class="tabs-bloks-left">
<div class="tab whiteborder">Как мы...</div>
<div class="tab">Могу ли я...</div>
</div>
 
<div class="tabs-bloks-right">

<div class="tabContent inter-h3 hide">
<div class="tabContent-in">
Наши технические аналитики...
</div>
</div>

<div class="tabContent inter-h3 show">
<div class="tabContent-in">
Наши технические аналитики...
</div>
</div>

</div>

</div>

CSS:

#tabs{
     display: inline-block;
     background: #111;    
     padding: 30px 20px;    transition: 2s;
}

#tabs .tab {
    padding: 5px 10px;
    cursor: pointer;
    z-index: 5;
    transition: 2s;
}
#tabs .whiteborder {
    border: 1px solid #707070;
    border-bottom: 1px solid #fff;    transition: 2s;
    border-radius: 3px 3px 0  0;
}
#tabs .tabContent {
    z-index: 1;    
    transition: 2s;
}
.tabContent-in{
    background: #1a1a1a;
    padding: 20px;	    transition: 2s;
}
#tabs .hide {
    display: none;    transition: 2s;
}
#tabs .show {
    display: block;
    margin-bottom: 0;    transition: 2s;
}

.tabs-tm{
	width: 100%;
	position: relative;
        margin-top: 60px;    transition: 2s;
}

.tabs-bloks-left{
    vertical-align: middle;
    display: inline-block;
    position: relative;
    width: 30%;
    transition: 2s;
}
.tabs-bloks-right{
    transition: 2s;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    width: 68%;
}

И сам скрипт:

var tab; // заголовок вкладки
var tabContent; // блок содержащий контент вкладки


window.onload=function() {
    tabContent=document.getElementsByClassName('tabContent');
    tab=document.getElementsByClassName('tab');
    hideTabsContent(1);
}

document.getElementById('tabs').onclick= function (event) {
    var target=event.target;
    if (target.className=='tab') {
       for (var i=0; i<tab.length; i++) {
           if (target == tab[i]) {
               showTabsContent(i);
               break;
           }
       }
    }
}

function hideTabsContent(a) {
    for (var i=a; i<tabContent.length; i++) {
        tabContent[i].classList.remove('show');
        tabContent[i].classList.add("hide");
        tab[i].classList.remove('whiteborder');
    }
}

function showTabsContent(b){
    if (tabContent[b].classList.contains('hide')) {
        hideTabsContent(0);
        tab[b].classList.add('whiteborder');
        tabContent[b].classList.remove('hide');
        tabContent[b].classList.add('show');
    }
}

Как сделать блоки слева и справа плавающими при переключении? transition: 2s; совсем не работает...

Comments

[Andrew]

свойство display не анимируется, играйтесь с opacity, z-index, margin, top,bottom (нужное подчеркнуть).
Можете глянуть как в jQuery сделано .show(300) , .hide(300)

Answer 1

[Павел Атайкин]

Для анимации display: none, display: block, можно использовать keyframes через opacity
Пример keyframes

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

Пример использования

.show
{
     animation:  fadeIn .25s;
}

P.S. Все свойства можете посмотреть в документации свойства animation