直播系统搭建中如何将页面滑动和dom动画配合的天一无缝

直播系统搭建中如何将页面滑动和dom动画配合的天一无缝

背景

2020将至，我们手机很多app会给我们推送各种炫酷的年终账单，相信有不少的小伙伴见过有类似效果。话不多说，下面我们一起来学习如何制作吧。

从技术人员的角度来说： 年终账单= 页面滑动 + dom动画 + 数据

对前端工作人员来说： 页面滑动和dom动画是最重要。

页面滑动和dom动画分开做，都不难，都很容易实现。 但如何让页面滑动和dom动画配合的天一无缝呢？？

2、开发过程

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动画配合的天一无缝 本文转载自网络，感谢（快狗打车前端团队）的分享，转载仅为分享干货知识，如有侵权欢迎联系云豹科技进行删除处理