使用シーン
ホームページ カルーセルを作成する場合、カルーセルが切り替わったときに、カルーセル上の画像とテキストがアニメーション化され、ゆっくりと表示される必要がある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公式サイトをご確認ください