使用引导事件添加动画

Adding animations using Bootstrap events

本文关键字：添加 动画 事件      更新时间：2023-09-26

我在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关键字，但我不确定如何实现这一点；有人能告诉我我缺了什么吗？

我不知道Bootstrap是否有动画类？但是，您可以使用此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');
    });
});

使用一点setTimeout魔法，我找到了解决方案：

$('#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';

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

注意：在col-md-5中，我添加了animated boundInRight类，我还添加了类add-animation作为钩子，本可以使用css选择器，但没关系。

这种方法的缺点：如果用户是一个点击狂，动画将不会显示，因为setTimeout就是这样工作的：D

相关文章：