使用 Swiper 回调和 Jquery 为幻灯片中的元素设置动画答案

【问题标题】：Using Swiper callback and Jquery to animate elements within Slideshows使用 Swiper 回调和 Jquery 为幻灯片中的元素设置动画
【发布时间】：2016-09-28 22:49:20
【问题描述】：

我最近使用了 Swiper.js。我决定制作幻灯片。这些效果很好。现在我想分别为每张幻灯片中的元素设置动画，我认为最好的方法是使用 Swiper.js 提供的回调。

第一个幻灯片效果很好，但是在转到下一个滑块（或返回到第一个滑块）时，动画似乎出现了故障。就好像图像首先以动画状态显示，然后再次动画。

我做了一个代码sn-p来演示这个问题：

 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

在这种情况下，要实现流畅的动画，需要做什么？

非常感谢。

【问题讨论】：

标签： javascript jquery css swiper animate.css

【解决方案1】：

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

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

然后添加 swiper 滑块选项，就像..

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

    }
});

【讨论】：