jquery - 如何将 CSS3 动画效果添加到简单的 jQuery 选项卡

Question

我创建了一个 jQuery Tabs 并且工作正常，但我想添加一些 CSS3 效果，如缩放、翻译、过渡...... 现在我的标签只有 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); 的选项卡内容转换:scale(1); 和 不透明度:0；不透明度: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