首先创建一个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

<swiperdirection="vertical"@swiper="onSwiper"@slideChange="onSlideChange":height="height":speed="600"ref="mySwipers"class="swiper-box"><swiper-slide class="page-box box1"><div class="safe-box">、<imgclass="ani vw-img":src="url + 'img1_1.png'"swiper-animate-effect="fadeInUp"swiper-animate-duration="1s"swiper-animate-delay="1.1s"/><imgclass="ani vw-img":src="url + 'img1_2.png'"swiper-animate-effect="fadeInUp"swiper-animate-duration="1s"swiper-animate-delay="1.45s"/><imgclass="ani vw-img":src="url + 'img1_3.png'"swiper-animate-effect="fadeInUp"swiper-animate-duration="1s"swiper-animate-delay="1.7s"/><imgclass="ani vw-img img1_4":src="url + 'img1_4.png'"swiper-animate-effect="fadeInUp"swiper-animate-duration="1s"swiper-animate-delay="2.1s"/><imgclass="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>

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中写了

vue3使用swiper+animate.css动效相关推荐

div旋转 vue_详细解析：uniapp项目|vue组件形式实现的水珠晃动loading纯CSS动效
前言上一篇文件给大家分享了一个颇具科技感的loading动效,[→传送门]这篇文章,小凡再来跟大家分享一个很酷的水珠晃动loading动效,依然是纯CSS实现的哦! 一.效果展示及思路分析 1.效果 ...
animate inater插件_基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目...
功能简介基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...
Vue实现集成使用第三方Animate.css动画库详细教程（解决鼠标移入移出闪烁问题）
vue通过第三方集成Animate.css简单快速的实现动画,通过类名引用,可以轻松实现Animate的所有动画,Animate.css是一款强大的预设css3动画库,Animate.css内置了很多 ...
详细解析：uni-app|vue组件实现茶杯中茶水浮动loading纯CSS动效
前言前面我已经跟大家分享了[科技感Loading动效]和[水珠晃动Loading动效]两篇文章了,如果大家没有读过,建议大家花一点点时间去看一下,有了前两篇文章的基础后,这次,小凡给大家再分享一个茶 ...
vue过渡动画Animate.css动画库(1)
一.前言: 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验, Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画 ...
vue3项目引入animate.css教程
0.项目背景:vue3 + vite + typescript 以下是项目使用的版本 "vue": "^3.0.4", "typescript&quo ...
vue项目调用通用组件_详细解析：uniapp项目|vue组件形式实现的科技感loading纯CSS动效...
前言本人是一枚并不安分守己的后端程序猿,一直对前端开发"垂涎三尺",所以,一有机会就会"不务正业"一番.最近,发现了一个非常好的学习资料,于是乎,我的老毛病又 ...
animate.css 动画库的使用
安装 npm install animate.css --save 在线文档 animate.css官方在线文档参考文章文章1@农药啊文章2@zxy_aabbcc 文章3@Suwanbin vu ...

vue3使用swiper+animate.css动效

首先创建一个vue3的项目

使用方法：

vue3使用swiper+animate.css动效相关推荐

最新文章

热门文章