页面中悬浮图标，上滑页面到一定高度时，图标的滑动与变透明

最新推荐文章于 2025-05-08 12:54:29 发布

半笑猫

最新推荐文章于 2025-05-08 12:54:29 发布

阅读量291

点赞数

文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/Amanologue/article/details/128673243

版权

该文章讲述了如何使用Vue的属性绑定和事件监听(onPageScroll)来控制视图(view)的显示和隐藏，基于页面滚动位置调整组件的状态。同时，通过CSS的动画(keyframes)实现图标的缩小和放大效果，调整opacity属性改变透明度，达到悬浮图标的动画过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view class="card " :class="hidden===true ? 'card-hidden' : hidden===false ? 'card-open' : ''" @click="toCard">
<image class="card-bg" src="../../static/images/new/card_seat_bg .png" mode=""></image>
<view class="card-seat">
	<image src="../../static/images/new/card_seat.png" mode=""></image>
</view>
</view>

onPageScroll可以监听滑动时页面的高度，可以通过这个来实现图标的滑出与滑入

onPageScroll(e) {
	this.pageY = e.scrollTop;
	if(this.pageY<300){
	this.pageY=300
	this.hidden=false
	}else{
		this.hidden=true
	}
			
},

若要实现悬浮图标的动画效果，css部分最重要的部分是animation，opacity: 0.5给图片设置透明度。

.card{
			position: fixed;
			top: 800upx;
			right:0;
			z-index: 10;
			width: 189upx;
			height: 139upx;
			.card-bg{
				width: 189upx;
				height: 139upx;
			}
			.card-seat{
				position: absolute;
				top: 0;
				left: 0;
				width: 84upx;
				height: 84upx;
				margin: 20upx 0 30upx 20upx;
				z-index: 11;
				image{
					width: 84upx;
					height: 84upx;
				}
			}
		}
		.card-hidden{
			animation: move 0.3s 1 alternate ease-in-out forwards;
			opacity: 0.5;
		}
		@keyframes move {
			from {
				width:189upx;
			}
			to{
				width: 100upx;
			}
		}
		
		.card-open{
			animation: open 0.3s 1 alternate ease-in-out forwards;
		}
		@keyframes open {
			from {
				width: 100upx;
			}
			to{
				width: 189upx;
			}
		}