Переходы CSS в закладках

Question

Почему переход, который я настроил, не анимирован? Я бы ожидал, что, поскольку класс animate удаляется, а затем снова добавляется к элементу, он будет повторно обновляться после переключения вкладок.

https://jsfiddle.net/jstn/Lt6qfv7s/

Спасибо,

Джастину

$('button').on('click', function() { 
 
\t var tab = $(this).attr('data-target'); 
 

 
\t $('.tab').removeClass('active'); 
 
\t $(tab).toggleClass('active'); 
 
\t 
 
\t $('.content').removeClass('animate'); 
 
\t $(tab).find('.content').toggleClass('animate'); 
 
});

.tab:not(.active) { display: none; } 
 

 
.content { transition: 3s all ease-out; } 
 

 
.content.animate { opacity: .3; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button data-target=".tab-1">Tab #1</button> 
 
<button data-target=".tab-2">Tab #2</button> 
 

 
<div class="tab tab-1"> 
 
\t <div class="content">This is Tab #1</div> 
 
</div> 
 

 
<div class="tab tab-2"> 
 
\t <div class="content">This is Tab #2</div> 
 
</div>

Answer 1

Поскольку вы используете display: none, удалите это и используйте opacity: 0 вместо

$('button').on('click', function() { 
 
    var tab = $(this).attr('data-target'); 
 

 
    $('.content').removeClass('animate'); 
 
    $(tab).find('.content').toggleClass('animate'); 
 
});

.content { 
 
    opacity: 0; 
 
    transition: 3s opacity ease-out; 
 
} 
 
.content.animate { 
 
    opacity: .3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button data-target=".tab-1">Tab #1</button> 
 
<button data-target=".tab-2">Tab #2</button> 
 

 
<div class="tab tab-1"> 
 
    <div class="content">This is Tab #1</div> 
 
</div> 
 

 
<div class="tab tab-2"> 
 
    <div class="content">This is Tab #2</div> 
 
</div>