Как добавить эффекты анимации CSS3 в простые вкладки jQuery

Question

Я создаю вкладки jQuery и отлично работает, но я хочу добавить некоторые эффекты CSS3, такие как scale, Translate, Transitions .. Теперь моя вкладка имеет только эффекты jQuery, такие как fadeIn/slideToggle, но мне нужно создать свои пользовательские эффекты с помощью CSS3, так как я могу добавить функцию анимации CSS3 в свой код вкладок.

Смотрите мой код здесь: demo

Некоторых CSS3 коды, необходимые для анимации эффектов:

-webkit-transition: all 0.4s ease; 
-o-transition: all 0.4s ease; 
transition: all 0.4s ease; 
-webkit-transform: scale(1); 
-o-transform: scale(1); 
transform: scale(1); 
opacity: 1; 

Анимации Я хочу, когда некоторые один клик на вкладке должен показать вкладку содержимое из transform: scale(0.8); to transform: scale(1); и opacity: 0; to opacity: 1;

Answer 1

При нажатии на заголовок вкладки, установить класс по совпадающим tab-content, запустить таймер для всего длиннее анимации , затем удалите класс.

$(".tabs li").click(function(){ 
    var cur =$(".tabs li").index(this); 
    var elm = $('.tabcontent:eq('+cur+')'); 
    elm.addClass("pulse"); 
    setTimeout(function() { 
      elm.removeClass("pulse"); 
    }, 220); 
}); 

Working jsFiddle

Answer 2

Установите свой CSS в класс, а затем используйте .toggleClass(), чтобы применить его к данному элементу.

Так,

$("tab").click(function(){ 
$(this).toggleClass("myClass"); 
}); 

И ваш CSS будет:

.myClass{ 
-webkit-transition: all 0.4s ease; 
-o-transition: all 0.4s ease; 
transition: all 0.4s ease; 
-webkit-transform: scale(1); 
-o-transform: scale(1); 
transform: scale(1); 
opacity: 1; 
}