背景
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的动画效果配置 www.swiper.com.cn/usage/anima… (swiper官网)
dome效果:pan.baidu.com/s/1pALAcGfA…
最后
以上是我实现一个年终账单的页面活动和dom动画效果的全部过程,希望对大家有所帮助