使用Swiper回调和JQuery来为幻灯片中的元素设置动画

我最近拿起Swiper.js。我决定做一个幻灯片。这些工作很好。现在我想分别为每张幻灯片中的元素制作动画，我认为这样做的最好方法是使用Swiper.js提供的回调。使用Swiper回调和JQuery来为幻灯片中的元素设置动画

第一张幻灯片效果不错，但在进入下一个滑块（或返回到第一个滑块）时，动画似乎会出现毛刺。就好像该图像首先以动画状态显示，然后再次进行动画。

我做了一个代码片段来演示这个问题：

html, body { 
 
     position: relative; 
 
     height: 100%; 
 
    } 
 
    body { 
 
     background: url(../../img/BannerEmpty.png); 
 
     background-repeat: no-repeat; 
 
     background-size: cover; 
 
     font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
 
     font-size: 14px; 
 
     color:#000; 
 
     margin: 0; 
 
     padding: 0; 
 
     text-align:center; 
 
    } 
 

 
    p { 
 
     font-family: 'Architects Daughter', cursive; 
 
     font-size: 40px; 
 
     justify-content: flex-start; 
 
     color: #3C3C3B; 
 
    } 
 
    .swiper-container { 
 
     width: 100%; 
 
     height: 100%;   
 
     
 
     
 
    } 
 
    .swiper-slide { 
 
     text-align: center; 
 
     font-size: 18px; 
 
     
 
     
 
     
 
     margin:auto; 
 
     /* Center slide text vertically */ 
 
     display: -webkit-box; 
 
     display: -ms-flexbox; 
 
     display: -webkit-flex; 
 
     display: flex; 
 
     -webkit-box-pack: center; 
 
     -ms-flex-pack: center; 
 
     -webkit-justify-content: center; 
 
     justify-content: center; 
 
     -webkit-box-align: center; 
 
     -ms-flex-align: center; 
 
     -webkit-align-items: center; 
 
     align-items: center; 
 
    } 
 

 
#swipeLeft { 
 
     margin: 0 20px 0 0 
 
} 
 

 
#swipeRight { 
 
     margin: 0 0 0 20px 
 
}

<link href="http://brickhunters.ddns.net/swiperslider/dist/css/swiper.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Test animations in Swiper</title> 
 
     <link href="https://fonts.googleapis.com/css?family=Architects+Daughter|Archivo+Black" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
     <!-- Swiper --> 
 
     <div class="swiper-container"> 
 
      <div class="swiper-wrapper"> 
 
       <div class="swiper-slide"> 
 
        <p id="swipeLeft">Slide from left!</p> 
 
        <p id="swipeRight">Slide from right!</p> 
 
       </div> 
 
       <div class="swiper-slide"> 
 
        <p id="swipeLeft">Why wont you work!</p> 
 
        <p id="swipeRight">Argh #$!?%#@&=</p> 
 
       </div> 
 
       <div class="swiper-slide"> 
 
       <img width="250px"id="swipeLeft" src="http://www.memes.at/faces/tears_in_the_eyes.jpg"></img> 
 
       <img width="250px" id="swipeRight" src="http://www.memes.at/faces/tears_in_the_eyes.jpg"></img> 
 
       </div> 
 
        
 
        
 
       </div> 
 
      <!-- Add Pagination --> 
 
      <div class="swiper-pagination"></div> 
 
      <!-- Add Arrows --> 
 
      
 
     </div> 
 
    
 
     <!-- Swiper JS --> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
     <script src="http://brickhunters.ddns.net/swiperslider/dist/js/swiper.min.js"></script> 
 
     <!-- Initialize Swiper --> 
 
     <script> 
 
      
 
     var swiper = new Swiper('.swiper-container', { 
 
      pagination: '.swiper-pagination', 
 
      paginationClickable: true, 
 
      spaceBetween: 30, 
 
      centeredSlides: true, 
 
      autoplay: 3000, 
 
      autoplayDisableOnInteraction: false, 
 
      loop: true, 
 
      onSlideChangeStart: function (s) { 
 
       var currentSlide = $(s.slides[s.activeIndex]); 
 
       currentSlide.find('#swipeLeft').removeClass('animated slideInLeft'); 
 
       currentSlide.find('#swipeRight').removeClass('animated slideInRight'); 
 
       
 
      }, 
 
      onSlideChangeEnd: function (s) { 
 
       var currentSlide = $(s.slides[s.activeIndex]); 
 
       currentSlide.find('#swipeLeft').addClass('animated slideInLeft'); 
 
       currentSlide.find('#swipeRight').addClass('animated slideInRight');  
 
      } 
 
     }); 
 
      
 
     </script> 
 
    </body> 
 
    </html>

，也是一个笔：http://codepen.io/RexDesign/pen/NRgJWy

这是什么一个需要做的做，实现了平滑的动画在这种情况下？

非常感谢提前。

来源

2016-09-28 Eugenius

添加动画在例如HTML的自定义数据属性类，

<p id="workStartPhrase" class="animated delay200ms fatten" data-animation="flipInY">Waarom zou ik?</p>

然后加入刷卡滑块选项，等作为..

var animEndEv = 'webkitAnimationEnd animationend'; 

var swiper = new Swiper('.swiper-container', { 
    pagination: '.swiper-pagination', 
    paginationClickable: true, 
    spaceBetween: 30, 
    centeredSlides: true, 
    autoplay: 0, 
    autoplayDisableOnInteraction: false, 
    loop: true, 
    onSlideChangeStart: function(s) { 
     var currentSlide = $(s.slides[s.activeIndex]); 
     var elems = currentSlide.find(".animated") 
     elems.each(function() { 
      var $this = $(this); 
      var animationType = $this.data('animation'); 
      $this.addClass(animationType, 100).on(animEndEv, function() { 
       $this.removeClass(animationType); 
      }); 
     }); 

    }, 
    onSlideChangeEnd: function(s) { 
     var currentSlide = $(s.slides[s.activeIndex]); 

    } 
});

来源

2017-04-22 15:34:51

使用Swiper回调和JQuery来为幻灯片中的元素设置动画

回答

相关问题