Vue3中使用swiper和animate.css

1、安装swiper库

npm i swiper -S

2、在vue组件中引入

//main.js
import "./assets/animate.css";//注意版本 版本不同class名称有所差异，js处理也要做相应的处理
/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
//组件中
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/pagination'
import { Mousewheel, Pagination, Autoplay, Controller } from 'swiper/modules'
import { swiperAnimateCache, swiperAnimate, clearSwiperAnimate } from '@/utils/swiper.animate.js'
const modules = [Autoplay, Mousewheel, Controller];
const modules2 = [Autoplay, Controller];
const swiperIdx = ref(0)
const pageSwiper = ref(null)
const sp1 = ref(null)
const sp2 = ref(null)

3、swiper.animate.js

export function swiperAnimateCache() {
  const allBoxes = window.document.documentElement.querySelectorAll('.ani')
  for (var i = 0; i < allBoxes.length; i++) {
    allBoxes[i].attributes['style'] ?
      allBoxes[i].setAttribute('swiper-animate-style-cache', allBoxes[i].attributes['style'].value) :
      allBoxes[i].setAttribute('swiper-animate-style-cache', ' ')
    allBoxes[i].style.visibility = 'hidden'
  }
}

export function swiperAnimate(a) {
  clearSwiperAnimate()
  var b = a.slides[a.activeIndex].querySelectorAll('.ani')
  for (var i = 0; i < b.length; i++) {
    b[i].style.visibility = 'visible'
    const effect = b[i].attributes['swiper-animate-effect'] ?
      b[i].attributes['swiper-animate-effect'].value :
      ''
    b[i].className = b[i].className + ' ' + effect + ' ' + 'animate__animated'
    const duration = b[i].attributes['swiper-animate-duration'] ?
      b[i].attributes['swiper-animate-duration'].value :
      ''
    // duration && style
    const delay = b[i].attributes['swiper-animate-delay'] ?
      b[i].attributes['swiper-animate-delay'].value :
      ''
    const style = b[i].attributes['style'].value + 'animation-duration:' + duration + ';-webkit-animation-duration:' + duration + ';' + 'animation-delay:' + delay + ';-webkit-animation-delay:' + delay + ';'
    // delay && (style = style )
    b[i].setAttribute('style', style)
  }
}

export function clearSwiperAnimate() {
  var allBoxes = window.document.documentElement.querySelectorAll('.ani')
  for (var i = 0; i < allBoxes.length; i++) {
    allBoxes[i].attributes['swiper-animate-style-cache'] && allBoxes[i].setAttribute('style', allBoxes[i].attributes['swiper-animate-style-cache'].value)
    allBoxes[i].style.visibility = 'hidden'
    allBoxes[i].className = allBoxes[i].className.replace('animate__animated', ' ')
    const effectValue = allBoxes[i].attributes['swiper-animate-effect'].value
    /* eslint-disable-next-line */
    allBoxes[i].attributes['swiper-animate-effect'] && (effectValue, allBoxes[i].className = allBoxes[i].className.replace(effectValue, ' '))
  }
}

4、在组件中使用

<swiper class="verticalSwiper" ref="pageSwiper" :direction="'vertical'" :slidesPerView="1" :spaceBetween="0"
      :speed="700" :mousewheel="{
        sensitivity: 1
      }" :modules="modules" :controller="{ control: sp2 }" @swiper="onSwiper1" @slideChange="onSlideChange1"
      @init="onInit">
      <swiper-slide class="p1">
        <!-- banner -->
        <banner :data="data.banners" />
        <!-- 快捷入口 -->
        <vblock :data="data.blockList"></vblock>
        <!-- 搜索 -->
        <vsearch></vsearch>
      </swiper-slide>
      <swiper-slide class="p2">
        <newsView :data="data.newsList"></newsView>
      </swiper-slide>
      <swiper-slide class="p3">
        <resource :data="data.resourceCard" :list="data.resourceList">
        </resource>
      </swiper-slide>
      <swiper-slide class="p4">
        <serviceView :data="data.serviceList"></serviceView>
      </swiper-slide>
      <swiper-slide class="p5">
        <newBooks :data="data.bookList" v-if="data.bookList.length"></newBooks>
      </swiper-slide>
      <swiper-slide class="p6">
        <messageBoard v-if="hasLoaded" :data="data.messageList" :setting="setting" :count='count'></messageBoard>
      </swiper-slide>
    </swiper>
    <!-- g滚轮菜单 -->
    <navBar :fixed="swiperIdx !== 0" :data="data.navList" />
    <div class="top_fix_swiper" :class="[swiperIdx === 5 ? 'last' : '']" :style="{ opacity: swiperIdx === 0 ? 0 : 1 }">
      <swiper class="verticalSwiper" ref="pageSwiper2" :direction="'vertical'" :slidesPerView="1" :spaceBetween="0"
        :mousewheel="false" :slideToClickedSlide="true" :pagination="{
          clickable: true,
        }" :modules="modules2" :controller="{ control: sp1 }" @swiper="onSwiper2" @slideChange="onSlideChange2">
        <swiper-slide v-for="(item, index) in menu "
          :class="[index === swiperIdx - 1 && 'pre', index === swiperIdx + 1 && 'next', index === swiperIdx ? 'active' : '']"
          v-show="(index === swiperIdx) || (index === swiperIdx - 1) || (index === swiperIdx + 1)"
          @click="onClick(index)">
          <p class="page_name">{{ item }}
          </p>
        </swiper-slide>
      </swiper>

const onInit = (e) => {
  swiperAnimateCache(e)
  swiperAnimate(e)
  console.log('onInit', pageSwiper.value.slides, e.slides)
}

const onSwiper1 = (swiper) => {
  sp1.value = swiper
};
const onSlideChange1 = (e) => {
  swiperIdx.value = e.activeIndex
  swiperAnimate(e)
  if (!hasLoaded.value && swiperIdx.value === 5) {
    hasLoaded.value = true
  }
};



const onSwiper2 = (swiper) => {
  sp2.value = swiper
};
const onSlideChange2 = (e) => {
  swiperIdx.value = e.activeIndex
  swiperAnimate(e)
};


const onInit2 = (e) => {
  swiperAnimateCache(e)
  swiperAnimate(e)
}
const onClick = (index) => {
  sp1.value.slideTo(index)
}

5.animate.css 动画使用

<template>
  <div class="news-content row">

    <!-- 标题 -->
    <p class="text-center ani" swiper-animate-effect="animate__fadeInUp"  swiper-animate-duration="1.2s"
      swiper-animate-delay="0s">
      <blockTitle title="最新消息"></blockTitle>
    </p>
    <!-- more -->
    <div class="ani" swiper-animate-effect="animate__fadeInUp"  swiper-animate-duration="1.2s"
      swiper-animate-delay="0s">
      <a class="more" href="https://lib.bjmu.edu.cn/portal/list.do?cid=5" target="_blank">
        <img src="https://image.zhihuishu.com/zhs_yufa_150820/b2cm/base1/202408/f68483605eb74155ae8c8a2500ae7bc4.png"
          alt="news more">
        <span class="more_tx">MORE</span>
      </a>
      <div class="news-view">
        <div class="row1">
          <div class="left">
            <newsItem :item="data[0]"></newsItem>
          </div>
          <div class="right">
            <newsItem :item="data[1]"></newsItem>
            <newsItem :item="data[2]"></newsItem>
          </div>
        </div>
        <ul class="row2" v-show="false">
          <li v-for="item in 2">
            <div class="time">
              <p>08</p>
              <p>2024-07</p>
            </div>
            <img
              src="https://image.zhihuishu.com/zhs_yufa_150820/b2cm/base1/202408/ad9ff6e8070d43fd8ea6abd32d4d24f5.png">
            <div class="cnt">
              <h4 class="ellipsis">图书馆二至四层开放时间临时调整公告</h4>
              <p class="ellipsis2">
                因系统调整和基建维修，即日起至7月31日的每周二、五（7月9日、7月12日、7月16日、7月19日、7月23日、7月26日、7月30日），图书馆二到四层延迟至中午12点开放。在此期间，一层自习区不受影响。谢谢广大师生的支持...
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>

注意事项贴图：