добавление анимаций с использованием событий начальной загрузки

Question

эй, ребята, у меня небольшая сложность с вкладками бутстрапа.

В основном я использую эти вкладки для демонстрационного сайта, и у меня есть следующая структура 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 соответственно. но то, что на самом деле делает этот код, - это удаление классов из всех элементов и их повторное добавление.

Я думаю, что это ключевое слово, возможно, должно быть использовано, но я не уверен, как это реализовать, кто-нибудь скажет мне, что мне не хватает?

Спасибо.

Alexander.

Answer 1

Я не знаю, если у Bootstrap есть анимированные классы? Однако вы можете использовать this repo для достижения желаемой анимации.

Добавить это:

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

Я немного обновил HTML (добавлен класс текстовый контент для каждого Col-мд-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'); 
    }); 

}); 

Answer 2

используя немного времени набор из магии, хотя я нашел решение:

$('#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, я добавить анимированный класс bounceInRight я также добавляю класс add-animation в качестве крючка, возможно, использовал селектор css, но неважно.

Минусом этого метода: если пользователь оказывается нажмите маньяком, анимация не будет отображаться .. потому что хорошо то будет кстати SetTimeout работает: D

имеют хороший день, ребята. YOLO.

любые предложения? очень приветствуются.