uniapp微信小程序端如何实现在元素可视化的时候开启动画

最新推荐文章于 2024-10-07 01:07:07 发布

小夏卷编程

最新推荐文章于 2024-10-07 01:07:07 发布

阅读量1k

点赞数 2

文章标签：微信小程序 uni-app 前端

本文链接：https://blog.csdn.net/a_biggerfish/article/details/129829114

版权

起初：我的想法是使用wowjs+animation.css实现，后来运行到微信小程序后发现

开发者工具报错Cannot use 'in' operator to search for 'requestAnimationFrame' in undefined

后来看微信开发文档说window是浏览器的（H5），小程序不存在报错undefined

于是经过一系列的尝试终于想到了一个方法，我的解决办法如下：

1.使用onPageScroll监听页面滚动位置

注意：onPageScroll与生命周期同级

onPageScroll(res) {
			/* 检查元素是否可视 */
			this.isVisableId("year2016")
			this.isVisableId("year2019")
			this.isVisableId("year2021")
			this.isVisableId("year2025")
			this.isVisableId("year2030")
			this.isVisableId("year2050")
			this.isVisableClass("transform30")
			this.isVisableClass("sensing")
			this.isVisableClass("china")
			
},

2.自定义控制类监听元素是否进入可视范围

定义一个对象将监听到的元素进行一个标记（使用id是因为我个人喜欢用class写公共样式，所以使用id区分元素监听）

这里使用到了uview的方法：getRect 节点布局信息 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

uniapp也有相关方法uni.createSelectorQuery() | uni-app官网

isVisableId(domId) { //元素及元素对应的动画
			//解决办法
				this.$u.getRect('#' + domId).then(rect => {
					if(rect.top > 0 && rect.top < this.screenHeight){
						/* 可视就添加样式 */
						this.$set(this.startAnimation,domId,{show:true})
					}
				})
			},

isVisableClass(domClass) { //元素及元素对应的动画
				this.$u.getRect('.' + domClass).then(rect => {
					if(rect.top > 0 && rect.top < this.screenHeight){
						//可见区域
						//添加动画，是元素变为可视
						this.$set(this.startAnimation,domClass,{show:true})
					}
					// if (rect.top <= 0) {
					// 	//第一种情况 向上滑动 滑过顶部到不可见区域
					// } else if (rect.top > this.screenHeight) {
					// 	//第二种情况 向下滑动 滑过底部到不可见区域
						
					// } else {
					// 	//可见区域
					// 	//添加动画，是元素变为可视
					// 	this.$set(this.startAnimation,domClass,{show:true})
					// }
				})
			},

最后使用我们的:class判断是否出出现在可视区域，如果出现就附上动画相关的样式

<view class="line transform30" :class="startAnimation['transform30'].show?'animation-letfToptoRightBottom':''"></view>