<image class="animation_balloon" src="/static/balloon.png"></image>
<image class="animation_boat" src="/static/boat.png"></image>
.animation_balloon {
position: absolute;
top: 10%;
/* left: 50upx; */
left: 5%;
z-index: 0;
width: 100upx;
height: 100upx;
animation: balloon 60s ease-in-out infinite alternate;
}
@keyframes balloon {
0% {
left: 5%;
}
100% {
left: 80%;
}
}
.animation_boat {
position: absolute;
top: 30%;
left: -160upx;
z-index: 0;
width: 160upx;
height: 170upx;
animation: boat 20s linear infinite;
}
@keyframes boat {
0% {
left: -160upx;
}
100% {
left: 125%;
}
}```
mengxinxuexi
- 发布：2021-03-31 09:33
- 更新：2021-03-31 10:41
- 阅读：504
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 20H2
HBuilderX类型： 正式
HBuilderX版本号： 3.1.7
手机系统： Android
手机系统版本号： Android 10
手机厂商： OPPO
手机机型： PADMOO
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
在pages.json中添加tabBar的情况下，什么都不做，过一段时间后，页面就会卡住，
在pages.json中添加tabBar的情况下，什么都不做，过一段时间后，页面就会卡住，
预期结果：
页面上的css动画，不会出现卡的情况
页面上的css动画，不会出现卡的情况
实际结果：
什么都不做，过一段时间后，页面就会卡住
什么都不做，过一段时间后，页面就会卡住
bug描述：
在app（打包、真机运行）上，只要是在页面上使用了多个css的动画（animation），或多个uni.createAnimation()，都会出现，过一段时间后，就卡住的情况，在H5上没有出现过卡的情况，只有在app上，才出现这种情况
mengxinxuexi (作者)
已经重新发了精简的项目
2021-03-31 11:10
2104_DLS
回复 mengxinxuexi: 时间大概多久会出现卡
2021-03-31 11:36
2104_DLS
回复 2104_DLS: 这边测试没有问题，到现在还是正常的，请检查自己代码。
2021-03-31 11:53
mengxinxuexi (作者)
回复 2104_DLS: 我仔细看过了，可能是因为pages.json中添加了tabBar，会导致动画卡住，另外我已经把一个测试项目上传了，这个我测试过了，在什么都不做的情况下，过大概6、7秒，不超过30秒，就会出现页面卡的情况
2021-03-31 16:02
2104_DLS
回复 mengxinxuexi: 确定换个手机没问题吗？我这边已经测试过您的代码，还是无法看到您说的卡顿，如果更换设备仍然出现的话，您给我们录屏吧。
2021-04-01 10:24
mengxinxuexi (作者)
回复 2104_DLS:在另一个华为手机上测试后，没发现问题，只有在我的oppo手机上，才发现动画卡住的问题，那么有什么办法，解决这个问题吗？
2021-04-02 10:27