Slide滑动动画在iOS上卡顿怎么办?

UE丶馨阳 阅读 26

我用CSS写了个简单的slide-down动画,用来展开/收起一个下拉菜单,在安卓和桌面浏览器上都挺流畅的,但在iPhone上特别卡,掉帧严重。试过加transform: translateZ(0)will-change都没啥用。

这是我的关键CSS代码:

.slide-enter-active, .slide-leave-active {
  transition: max-height 0.3s ease-in-out;
}
.slide-enter-from,
.slide-leave-to {
  max-height: 0;
}
.slide-enter-to,
.slide-leave-from {
  max-height: 200px;
}

是不是用max-height做动画本身就不好?有没有更合适的方案?

我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
皇甫玉惠
用max-height做动画确实不行,改用transform: translateY应该会流畅些。试试这个:
.slide-enter-active, .slide-leave-active {
transition: transform 0.3s ease-in-out;
}
.slide-enter-from,
.slide-leave-to {
transform: translateY(-200px);
}
.slide-enter-to,
.slide-leave-from {
transform: translateY(0);
}

差不多就行
点赞
2026-03-24 13:34