场景:现在好多推广翻页的h5都会添加一些动效,大部分结合的是animate.css这个效果,参考
animate.css动效是比较多样化并且很容易上手的css模板
那么swiper如何结合到这个animate.css呢
首先创建一个vue3的项目
1、进入swiper官网下载swiper_animate.js与animate.css
地址:下载Swiper - Swiper中文网Swiper各版本的下载地址,Swiper百度网盘下载https://www.swiper.com.cn/download/index.html
下载这两个文件到本地之后放进项目里面
使用方法:
1、项目执行语句:
npm install swiper
使用swiper8的版本
2、打开项目的main.js
// 引入css
import '../src/assets/css/animate.min.css'
// 定义swiper_animate.js
import * as swiperAni from "../src/assets/js/swiper_animate.js";
// 引入swiper
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import {
Swiper,
SwiperSlide
} from "swiper/vue";
app.component('Swiper', Swiper)
app.component('SwiperSlide', SwiperSlide)
// 全局定义swiper_animate中的三个方法
app.config.globalProperties.swiperAnimateCache = swiperAni.swiperAnimateCache
app.config.globalProperties.swiperAnimate = swiperAni.swiperAnimate
app.config.globalProperties.clearSwiperAnimate = swiperAni.clearSwiperAnimate
3、.vue页面使用
html
<swiper
direction="vertical"
@swiper="onSwiper"
@slideChange="onSlideChange"
:height="height"
:speed="600"
ref="mySwipers"
class="swiper-box"
>
<swiper-slide class="page-box box1">
<div class="safe-box">、
<img
class="ani vw-img"
:src="url + 'img1_1.png'"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1s"
swiper-animate-delay="1.1s"
/>
<img
class="ani vw-img"
:src="url + 'img1_2.png'"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1s"
swiper-animate-delay="1.45s"
/>
<img
class="ani vw-img"
:src="url + 'img1_3.png'"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1s"
swiper-animate-delay="1.7s"
/>
<img
class="ani vw-img img1_4"
:src="url + 'img1_4.png'"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1s"
swiper-animate-delay="2.1s"
/>
<img
class="ani vw-img"
:src="url + 'img1_5.png'"
swiper-animate-effect="fadeInUp"
swiper-animate-duration="1s"
swiper-animate-delay="2.4s"
/>
</div>
</swiper-slide>
</swiper>
js
import {getCurrentInstance } from "vue";
export default {
setup() {
// 为了获取全局定义的方法
const { proxy } = getCurrentInstance();
const onSwiper = (swiper) => {
proxy.swiperAnimateCache(swiper);
proxy.swiperAnimate(swiper);
};
const onSlideChange = (swiper) => {
proxy.swiperAnimate(swiper);
};
return {
onSwiper,
onSlideChange,
};
},
}
解释:
class一定要加上ani,不然是没有效果 为什么要加这个class名呢,是因为swiper_animate.js中写了