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了,如果幫助到了你的話我會很開心噠.