使用场景
在做主页轮播的时候,有用到 swiper
插件; 需求是,轮播切换的时候,轮播上的图片及文字添加动画,缓缓出现。 搭配 swiper
使用,可以选择 animate.css
;
这里主要介绍 animate.css
的安装及页面使用,页面有用到的swiper
相关的就不介绍了,详情可以翻看上篇文章,上篇文章针对 swiper
在 vue3
中的使用有详细的使用教程。
使用
- 切换到项目终端 ,输入命令
npm install animate.css --save
, 进行安装 - 在
main.js
里,引入animate.css
并使用,具体代码如下;
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css';
import animated from "animate.css"
createApp(App).use(VueAwesomeSwiper).use(animated).use(router).mount('#app')
- 在用到轮播的页面里,针对需要添加动画的
div
添加animate
官方的动画对应的类名,比如这里我需要的场景是:文字从右侧缓缓出现,所以找到官方对应的效果是fadeInRight
,这里直接在需要添加动画的文字div
上添加类名即可。代码如下:
<template>
<div class="index">
<swiper
:modules="modules"
:loop="true"
:slides-per-view="1"
:space-between="50"
:autoplay="{ delay: 5000, disableOnInteraction: false }"
:pagination="{ clickable: true }"
:scrollbar="{ draggable: false }"
class="swiperBox"
>
<swiper-slide v-for="(item,index) in state.bannerList" :key="index">
<img :src="item.imgUrl" alt="" class="banner">
<div class="title animates fadeInRight">{{item.title}}</div>
</swiper-slide>
</swiper>
</div>
</template>
</script>
// 这里引入的swiper,及swiper相关的定义使用,就不写了;具体看上篇文章
</script>
<style lang="less" scoped>
.index {
.swiper-slide {
position: relative;
.title {
position: absolute;
top:350px;
left: 200px;
font-size: 28px;
line-height: 42px;
margin-top: 10px;
height: 63px;
font-weight: 450;
color: #fff;
text-shadow: 3px 4px 12px rgb(0 0 0 / 82%);
}
}
// 切换轮播后的active 动画设置时间及延迟
.swiper-slide-active .animate {
animation-duration: 2s;
animation-fill-mode: both;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
}
// 这里是animate对应的动画名称
.swiper-slide-active .fadeInRight{
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
}
</style>
总结: 更多animate.css
动画效果,可查看官网animate