1. 开发过程
1）引入 vue-awesome-swiper实现页面滑动
npm install --save vue-awesome-swiper
引入方式两种分别
a) 全局引入（在main.js中引入）
import vueAwesomeSwiper from 'vue-awesome-swiper' import './static/css/swiper.min.css'（下载到了本地） Vue.use(vueAwesomeSwiper)
b) 局部（在组件中）
import { swiper, swiperSlide } from 'vue-awesome-swiper' components: { swiper, swiperSlide, }
页面初始化
<swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper"> <swiper-slide > <first-page></first-page> </swiper-slide> <swiper-slide class="swiper-slide"> <old-driver-page></old-driver-page> </swiper-slide> <swiper-slide class="swiper-slide"> <join-page></join-page> </swiper-slide> </swiper>
data() { return { swiperOption: { // 初始化参数 direction: 'vertical', // 垂直切换选项 autoplay: false, // 是否自动播放 height : window.innerHeight, // 高 width:window.innerWidth //宽 } } }, computed: { swiper() { return this.$refs.mySwiper.swiper } }, mounted(){ this.swiper.slideTo(0,0, false); //跳到指定页 },
引入选择任意一种方式都可以，项目启动，页面滑动效果完成。
2）引入animate.css
引入animate.css
npm install animate.css --save
main.js中引入
import animated from 'animate.css' Vue.use(animated)
####3)引入swiper.animate1.0.3.min.js
重点来了！！！！
页面滑动和dom动画的链接着：swiper.animate
下载地址：https://www.swiper.com.cn/download/index.html#file8
组件引入：
import * as swiperAnimated from './../../static/js/swiper.animate1.0.3.min.js'
组件配置：
data() { return { swiperOption: { direction: 'vertical', // 垂直切换选项 autoplay: false, height: window.innerHeight, width: window.innerWidth, on: { init: function () { swiperAnimated.swiperAnimateCache(this); //隐藏动画元素 swiperAnimated.swiperAnimate(this); //初始化完成开始动画 }, slideChangeTransitionEnd: function () { swiperAnimated.swiperAnimate(this); //每个slide切换结束时也运行当前slide动画 } } } } },
动画的Dom上添加：
swiper-animate-effect：切换效果 swiper-animate-duration：可选，动画持续时间（单位秒 swiper-animate-delay：可选，动画延迟时间（单位秒）
启动项目，项目报错
我们打开swiper.animate1.0.3.min.js发现该文件并没有export使用的几个方法，
自己修改swiper.animate1.0.3.min.js文件， 修改完后的文件：
export function swiperAnimateCache(a) { for (var j = 0; j < a.slides.length; j++) for (let allBoxes = a.slides[j].querySelectorAll(".ani"), i = 0; i < allBoxes.length; i++){ allBoxes[i].attributes["style"] ? allBoxes[i].setAttribute("swiper-animate-style-cache", allBoxes[i].attributes["style"].value) : allBoxes[i].setAttribute("swiper-animate-style-cache", " "), allBoxes[i].style.visibility = "hidden" } } export function swiperAnimate(a) { clearSwiperAnimate(a); const b = a.slides[a.activeIndex].querySelectorAll(".ani"); for (let i = 0; i < b.length; i++){ b[i].style.visibility = "visible" const effect = b[i].attributes["swiper-animate-effect"] ? b[i].attributes["swiper-animate-effect"].value : "" b[i].className = b[i].className + " " + effect + " " + "animated" const style = b[i].attributes["style"].value const duration = b[i].attributes["swiper-animate-duration"] ? b[i].attributes["swiper-animate-duration"].value : "" duration && (style = style + "animation-duration:" + duration + ";-webkit-animation-duration:" + duration + ";") const delay = b[i].attributes["swiper-animate-delay"] ? b[i].attributes["swiper-animate-delay"].value : "" delay && (style = style + "animation-delay:" + delay + ";-webkit-animation-delay:" + delay + ";") b[i].setAttribute("style", style) } } export function clearSwiperAnimate(a) { for (var j = 0; j < a.slides.length; j++){ let allBoxes = a.slides[j].querySelectorAll(".ani") for (let i = 0; i < allBoxes.length; i++){ allBoxes[i].attributes["swiper-animate-style-cache"] && allBoxes[i].setAttribute("style", allBoxes[i].attributes["swiper-animate-style-cache"].value) allBoxes[i].style.visibility = "hidden" allBoxes[i].className = allBoxes[i].className.replace("animated", " ") const effectV = allBoxes[i].attributes["swiper-animate-effect"].value allBoxes[i].attributes["swiper-animate-effect"] && (effectV,allBoxes[i].className = allBoxes[i].className.replace(effectV, " ")) } } }
文件自己修改，技术能力有限，如果谁有更好的修改方法，欢迎留言沟通。
dom的动画效果配置www.swiper.com.cn/usage/anima…（swiper官网）
dome效果：pan.baidu.com/s/1pALAcGfA…
最后
以上是我实现一个年终账单的页面活动和dom动画效果的全部过程，希望对大家有所帮助
