安装
npm i vue vue-loader css-loader --save
npm i @vue/cli
npm i vue-awesome-swiper --save
引入vue-awesome-swiper animate.css animate.js
<template>
<div id="app">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide class="first-page swiper-no-swiping">
<img class="ani" src="./assets/images/p1-1.png" width="100%" height="100%" swiper-animate-effect="fadeIn" swiper-animate-delay="5.2s" swiper-animate-duration="0.5s">
</swiper-slide>
</swiper>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import * as animate from './assets/js/animate.js'
export default {
name: 'app',
data(){
swiperOption: {
direction: 'vertical',
effect: 'fade',
mousewheel: true,
noSwiping: true,
width: window.innerWidth,
height: window.innerHeight,
on:{
init:function(){
animate.swiperAnimateCache(this);//隐藏动画元素
animate.swiperAnimate(this);//初始化完成开始动画
},
slideChangeTransitionEnd: function(){
animate.swiperAnimate(this);//每个slide切换结束时也运行当前slide动画
var thisindex = this.activeIndex;
},
},
},
}
components: {
swiper,
swiperSlide
},
}
</script>
<style scoped>
@import './assets/styles/animate.css';
</style>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。