使用Animation：translateY在真机上出现卡顿

最新推荐文章于 2024-09-14 15:56:48 发布

不想起名55

最新推荐文章于 2024-09-14 15:56:48 发布

阅读量391

点赞数

分类专栏：小程序文章标签：前端微信小程序

本文链接：https://blog.youkuaiyun.com/2201_75499330/article/details/131764883

版权

小程序专栏收录该内容

13 篇文章

订阅专栏

在个人手机上测试发现使用Animation时出现卡顿现象，但同样的代码在微信小程序环境中却运行流畅。问题可能与硬件加速有关，已在动画相关部分启用了`transform:translateZ(0);`以尝试优化。动画关键帧定义了元素从`translateY(20px)`到`translateY(-750px)`的平移过程。

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

使用Animation在自己手机上测试发现出现卡顿现象，在微信小程序上却没有卡顿。

在使用动画的地方开启硬件加速

.road{
	animation: bounce 20s  linear infinite;
	transform: translateZ(0);
}
@keyframes bounce {
	0% {
		transform: translateY(20px);
	}
	50%,
	100% {
		transform: translateY(-750px);
	}
}