vue swiper animate 如何使用?其实很简单的,网上收索遇到很多坑,而且版本更新页很快好多都用不了.

swiper是一个很好用的轮播滑动效果插件,es5用起来很简单引用对应的css和js就好,然后有的落地页是需要一些动画交互的,动画库有很多,最先想到的一定是animate.css嘛.很好用,但是有一个问题存在,就是页面加载的时候动画已经全部执行完成,所以你滑到第二页的时候并没有动画效果,解决办法就是在初始化的时候隐藏掉有动画效果的节点,这时候需要用到swiper.animate.js.

swiper官网你想要的都有.

那么问题又来了zaivue中如何使用这个swiper.animate.js呢,因为vue中有vue-awesome-swiper的封装并没有swiper.animate的封装所以这就给我们这些刚刚接触vue的同学造成了一些麻烦和困扰,我们要如何使用这个需要自己加载进去的js文件呢?下边就是一些步骤,其实很简单,只不过是自己懒一碰到麻烦第一时间想到的是去找教程,而不是自己考虑问题解决问题.

只说一下在vue中的引用

cnpm install vue-awesome-swiper --save 

main.js 中引入 
import VueAwesomeSwiper from 'vue-awesome-swiper'; 
npm install animate.css --save
Vue.use(VueAwesomeSwiper);
Vue.use(animate)

到这一步可以根据官网示例正常使用swiper,然后是使用swiper.animate.js

因为官网提供的swiper.animate1.0.3.js是针对es5写法的,在vue中使用的话需要做一些修改,点击下边连接去下载

麻烦自己找一下swiper.animate1.0.3.js,如果没有的话请稍后在下载,资源刚刚上传.

在组件中

        import * as swiperAni from '../assets/js/swiper.animate1.0.3.min.js'
    
        return {
                    swiperOption: {
                    direction: 'vertical', // 垂直切换选项
                    loop: false,
                    on: {
                        init: function () {
                            swiperAni.swiperAnimateCache(this)
                            swiperAni.swiperAnimate(this)
                        },
                        slideChangeTransitionStart: function () {

                        },
                        slideChangeTransitionEnd: function () {

                        },
                        slideChange: function () {
                            swiperAni.swiperAnimate(this)
                        }
                    }
                }
            }
            
        

<template>
    <swiper class="touch" :options="swiperOption" ref="mySwiper" >
        <swiper-slide class="page slide1" >
            <div class="slide-model ani" swiper-animate-effect="rubberBand" swiper-animate-duration="0.5s" swiper-animate-delay="0s"><h1>Slide 1-1</h1></div>
            <div class="slide-model ani" swiper-animate-effect="rubberBand" swiper-animate-duration="0.5s" swiper-animate-delay="0s"><h1>Slide 1-2</h1></div>
        </swiper-slide>
        <swiper-slide class="page slide2"></swiper-slide>
        <swiper-slide class="page slide3"></swiper-slide>
    </swiper>
</template>

ok了,如果帮助到了你的话我会很开心哒.