IOS CSS3 right transformX 动画卡顿回弹

最新推荐文章于 2025-05-16 16:13:10 发布

左钦杨

最新推荐文章于 2025-05-16 16:13:10 发布

阅读量242

点赞数 3

文章标签： ios css3 前端

本文链接：https://blog.csdn.net/sinat_29843547/article/details/147989925

版权

在这里插入图片描述

卡片从右往左滑动，在同时变换 width height right transformX的时候在某些IPhone机型上会有卡顿，在Chrome和Android等很多机型都是OK的，包括我的iphone 14 pro max. IOS 18.2 也是好的。但是，新的iPhone16 也会卡，会回弹一下。

感觉像是计算的不够好，在变大和向左同时向右移动的时候，不能完美的计算出来合适的速度以及变换。

解决办法是，宽高变化替换成scale right不变，保持只改变transformX和scale 动画。虽然没有原来很好的位置和大小了。但是至少动画不是卡顿的。

@keyframes slideLastRightToActive {
  0% {
    width: 275px;
    height: 320px;
    scale: 1;
    right: 50%;
    transform: translateX(calc(50% + 40px));
  }
  100% {
    width: 275px;
    height: 320px;
    scale: 1.2;
    right: 50%;
    transform: translateX(calc(50% / 1.2));
  }
}