javascript - 使用 Bootstrap 事件添加动画

Question

我在使用 Bootstrap 选项卡时遇到了一些小困难。

基本上，我将这些选项卡用于演示网站，并且具有以下 HTML 结构。

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>

现在效果非常好，我已经在我的很多旧网站上使用了这个选项卡功能，但是这次我决定添加一些 css-3 动画，所以让我们重点关注我遇到困难的部分。基本上，每次单击选项卡时我都想要 <img>和 <div class="col-md-5">要添加类 animated bounceInLeft和animated bounceInRight分别。

现在，我做了什么来实现这一目标，基本上每次单击选项卡时都会触发事件，hidden.bs.tab每次显示选项卡时都会触发事件 shown.bs.tab 。现在我写了下面的代码:

$('#myTab').on('hidden.bs.tab'  , function(){
    // console.log('tab hidden');
    $('.tab-content img').removeClass('animated bounceInLeft');
    $('.tab-content .col-md-5').removeClass('animated bounceInRight');
});

$('#myTab').on('shown.bs.tab' , function(){
    // console.log('tab hidden');
      if ($('.tab-pane').hasClass('active')) {
      $('.tab-content img' ).addClass('animated bounceInLeft');
      $('.tab-content .col-md-5').addClass('animated bounceInRight');          
    }
});

我编写的上述代码有一个很大的缺陷，我想要实现的是，当我单击选项卡时，我只想要 <img>和 <div class="col-md-5">要添加类 animated bounceInLeft 的特定选项卡和animated bounceInRight分别。但上面的代码真正做的是从所有元素中删除类并立即重新添加它们。

我在想this可能需要使用关键字，但我不确定如何实现它；有人可以告诉我我错过了什么吗？

Answer 1

不知道Bootstrap有没有动画类？但是您可以使用 this repo实现您想要的首选动画。

添加此:

<link rel="stylesheet" href="animate.min.css">

我稍微更新了 HTML(向每个 col-md-5 添加了类文本内容)。

<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="http://lorempixel.com/400/200/" alt="stretching exercise" class="pull-right">
           </div>
           <div class="col-md-5 text-content">
              <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>

还有这个 jQuery

$(document).ready(function(){ 
    //make first tab active
    $("#myTab li:eq(0) a").tab('show');

    $('#myTab').on('hidden.bs.tab'  , function(){
        $('.text-content').removeClass('animated bounceInRight');
        $('img').removeClass('animated bounceInLeft');
    });

    $('#myTab').on('shown.bs.tab' , function(){
        $('.active').find('.text-content').addClass('animated bounceInRight');
        $('.active').find('img').addClass('animated bounceInLeft');
    });

});