基于swiper和animate.css的全屏H5动效和花瓣飘落效果

Animate官网 animate.css

Swiper官网 swiper

Dom 主体结构：

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiperItem1"></div>
            <div class="swiper-slide swiperItem2"></div>
            <div class="swiper-slide swiperItem3"></div>
        </div>
    </div>

凡是需要使用animate.css 动画的元素 都添加 animate__animated类， 和data-class属性， data-class 的属性就是动画类

 <div class="wordCtn animate__animated" data-class="animate__fadeInUp">一见倾心</div>

Js关键代码：

async function initSwiper () {
        let changeTime = 500; //  翻页时间
        let swiper = new Swiper('.swiper-container',{
            direction : 'vertical',
            followFinger : false,
            speed: changeTime,
            mousewheel: true,
            on:{
                init:function(swiper) {
                    slide = this.slides.eq(0);
                    let doms = $(slide).find('.animate__animated');
                    Array.prototype.forEach.call(doms, function(dom) {
                        let subClass = dom.dataset.class;
                        $(dom).addClass(subClass);
                    });
                },
                transitionStart: function() {
                    setTimeout(() => { // 是为了 翻页的时候 之前的元素 不要隐藏，翻过去之后再隐藏
                        for(i = 0; i < this.slides.length; i++){
                            slide = this.slides.eq(i);
                            let doms = $(slide).find('.animate__animated');
                            Array.prototype.forEach.call(doms, function(dom) {
                                let subClass = dom.dataset.class;
                                $(dom).removeClass(subClass);
                            });
                        }
                    }, changeTime);
                },
                transitionEnd: function() {
                    slide = this.slides.eq(this.activeIndex);
                    // 滚动到最后一页隐藏箭头
                    if (this.slides.length - 1 == this.activeIndex) {
                       $('.arrowDownImg').hide();
                    } else {
                        $('.arrowDownImg').show();
                    }
                    let doms = $(slide).find('.animate__animated');
                    Array.prototype.forEach.call(doms, function(dom) {
                        let subClass = dom.dataset.class;
                        $(dom).addClass(subClass);
                    });
                },
            }
        });
    }

Js代码的思路：

1. 在 init 的时候给当前页面需要播放动画的元素添加动画类，从data-class 获取
2. transitionStart 是滑动开的时候触发，这时候不能立马移除 在第一步添加的data-class 属性，需要等翻页动画结束再移除
3. transitionEnd 是翻页效果结果，到了下一页，这时候开始播放动画，就是把当前页面的data-class 添加到元素的class上

效果如下：