Question

嘿伙计们我在我的一个项目中使用bootstrap tabs组件，现在我想在我的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秒。

如果有人能帮我加入失踪的人，我将不胜感激。如何在每次单击选项卡时显示动画？

谢谢。

亚历山大。

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') ];

然后使用回调

添加eventListener

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}
}

bootstrap动画选项卡内容脚本

1 个答案: