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

Question

我创建了一个 jQuery 选项卡并且工作正常，但我想添加一些 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); to transform: scale(1); 的选项卡内容和 opacity: 0; to opacity: 1;

Answer 1

将您的 CSS 设置为 class，然后使用 .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;
}

Answer 2

当您单击选项卡标题时，在匹配的 tab-content 上设置一个 class，启动一个比动画稍长的计时器，然后删除 class。

$(".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

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

How to add CSS3 Animation Effects to Simple jQuery Tabs

css

jquery

animation

tabs

effects