javascript - Bootstrap 动画选项卡内容脚本

Question

嘿伙计们，我正在我的一个项目中使用 Bootstrap 选项卡组件，现在我想向我的 Bootstrap 选项卡添加一些动画，下面是 HTML 代码:

<ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#sectionA">General fitness</a></li>
                <li><a href="#sectionB">Cardio</a></li>
                <li><a href="#sectionC">weight training</a></li>
                <li><a href="#sectionD">weight loss</a></li>
            </ul>
            <div class="tab-content">
                <div id="sectionA" class="tab-pane fade in active">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-offset-1 col-md-5 clearfix">
                                <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right animated bounceInLeft">
                            </div>
                            <div class="col-md-5 animated bounceInRight" >
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>

                            </div>
                        </div>
                    </div>
                </div>
                <div id="sectionB" class="tab-pane fade">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-offset-1 col-md-5 clearfix">
                                <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
                            </div>
                            <div class="col-md-5" >
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>

                    </div>
                </div>
            </div>
        </div>
        <div id="sectionC" class="tab-pane fade">
            <div class="container">
                <div class="row">
                    <div class="col-md-offset-1 col-md-5 clearfix">
                        <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
                    </div>
                    <div class="col-md-5" >
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>

                    </div>
                </div>
            </div>
        </div>
        <div id="sectionD" class="tab-pane fade">
            <div class="container">
                <div class="row">
                    <div class="col-md-offset-1 col-md-5 clearfix">
                        <img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
                    </div>
                    <div class="col-md-5" >
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>

                    </div>
                </div>
            </div>
        </div>
    </div>

现在一切正常，请注意我如何将动画添加到 <img>和第二个<div class="col-md-5"> 。

下面是我为每次单击选项卡时应用动画而编写的脚本:

Jquery 脚本:

$('#myTab').on('click' , 'li a' , function(){

    $this = $(this);
    var str_href = $this.attr('href'); 

      str_image      = str_href + ' ' + 'img';
      str_contentdiv = str_href + ' ' + '.add-animation';

      $(str_image).removeClass('animated bounceInLeft');
      $(str_contentdiv).removeClass('animated bounceInRight');

      setTimeout(function(){
          $(str_image).addClass('animated bounceInLeft');
          $(str_contentdiv).addClass('animated bounceInRight'); 

           setTimeout( function(){
              $(str_image).removeClass('animated bounceInLeft');
              $(str_contentdiv).removeClass('animated bounceInRight');
           }, 2000);
      }, 100);  

});

它简短而甜蜜，问题是删除类时 setTimeout 函数需要 2 秒，这意味着如果用户是点击狂，动画将不会运行，原因是，我不能'爱人2秒规则是，动画运行2秒。

如果有人能帮我加入这里丢失的部分，我将不胜感激，I.E.如何让动画在每次单击选项卡时出现？

谢谢。

亚历山大.

Answer 1

在元素上为 animationend/transitionend 事件添加事件列表器首先获取带有正确前缀的转换结束名称。 (使用 Modernizr 或读取 this article 实现不使用 Modernizr 获取带前缀的事件名称的逻辑)

var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd',// Saf 6, Android Browser
    'MozTransition'    : 'transitionend',      // only for FF < 15
    'transition'       : 'transitionend'       // IE10, Opera, Chrome, FF 15+, Saf 7+
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

然后添加带有回调的事件监听器

element.addEventListener(transEndEventName, transitionEndCallback);

此外，您还可以在元素变为事件状态时实现所需的动画，仅一次

#myTab.active img {
  animation: bounce-left-right 2s ease 1; //Actually is 1 by default so it's not necessary 
}
@keyframe {
  0% {//bounce left animation}
  100% {//bounce right animation}
}