swiper 在vue中切换中动画重新加载问题

问题：h5页面有9页，使用animate.css 给页面做动态效果，用swiper翻页后9页的动画已经执行结束了，当滑动到第9页时候没有动画效果
思路：使用display属性把div未在当前swiper页面的元素隐藏不执行动画，当swiper滑动到当前页面时候block显示div执行动画

—添加css
<style>
.nopage{display: none;}
.showpage{display: block;}
</style>

–动画div样式

<swiper :options="swiperOption">
    <swiper-slide>
       <div class="birthday item" index="13"> --第一页动画 </div>
    </swiper-slide>
    <swiper-slide>
       <div class="birthday item" index="13"> --第二页动画 </div>
    </swiper-slide>
</swiper>

npm install vue-awesome-swiper@3.1.3 --save-dev
npm install jquery@3.3.1 --save-dev
import $ from 'jquery'

--test.vue中引入

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
    data(){
      return{
        musicPlay:false,
        date:yl.getNlDate().split(" ")[1],
        swiperOption:{
          direction: 'vertical',  //上下翻页
          height:window.innerHeight,
          on: {
            slideChangeTransitionStart: function(e){
              $(".swiper-slide-active").find('.item').removeClass('nopage').addClass('showpage')
              $(".swiper-slide-prev,.swiper-slide-next").find('.item').removeClass('showpage').addClass('nopage')
            },
          }
        }
      }
    },
    beforeCreate:function () {
      document.title = "生日快乐";
    },
    mounted:function () {
      $(".swiper-slide-prev,.swiper-slide-next").find('.item').removeClass('showpage').addClass('nopage')
    },
    name: 'birthday1',
    components:{
      swiper, swiperSlide
    }
  }