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

【问题标题】：How to add CSS3 Animation Effects to Simple jQuery Tabs如何将 CSS3 动画效果添加到简单的 jQuery 选项卡
【发布时间】：2015-01-22 04:40:42
【问题描述】：

我创建了一个 jQuery 选项卡并且工作正常，但我想添加一些 CSS3 效果，如缩放、翻译、过渡.. 现在我的选项卡只有像fadeIn/slideToggle 这样的jQuery 效果，但是我需要使用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;

【问题讨论】：

标签： jquery css animation tabs effects

【解决方案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

【讨论】：

感谢您的回复，但我想为标签内容而不是标签标题制作动画？
非常感谢您现在正在工作：link 但有时当我单击时不起作用，问题出在哪里？
@Uikithemes 是的，实际上toggle() 不适合标签，更新为使用addClass() 并使用计时器来调用removeClass()，现在更干净了。
awesome 正在工作，我想非常感谢您的帮助 :)
@Uikithemes 很高兴它有帮助！

【解决方案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;
}

【讨论】：

$("tab").click 绑定到什么？
@DelightedD0D 这只是一个示例，用于说明目的，您可以更改选择器以绑定到您想要的任何内容。