当前位置: 首页 > news >正文

IOS CSS3 right transformX 动画卡顿 回弹

在这里插入图片描述

卡片从右往左滑动,在同时变换 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));}
}
http://www.xdnf.cn/news/457867.html

相关文章:

  • 生产级编排AI工作流套件:Flyte全面使用指南 — Core concepts Tasks
  • day21:零基础学嵌入式之数据结构
  • X-R1:训练医疗推理大模型
  • AD 规则的导入与导出
  • W1R3S: 1.0.1靶场
  • 10.2 LangChain v0.3全面解析:模块化架构+多代理系统如何实现效率飙升500%
  • 团队项目培训
  • 题解:P12207 [蓝桥杯 2023 国 Python B] 划分
  • 编译OpenSSL时报错,Can‘t locate IPC/Cmd.pm in @INC perl环境
  • JVM方法区核心技术解析:从方法区到执行引擎
  • 什么是 NB-IoT ?窄带IoT 应用
  • 铜墙铁壁 - 服务网格的安全之道 (Istio 实例)
  • Electron详解:原理与不足
  • 如何在多线程环境下避免快速失败异常?
  • VMware(Ubuntu系统)设置共享文件夹
  • 前端流行框架Vue3教程:16. 组件事件配合`v-model`使用
  • 阿里云ECS部署Dify
  • go依赖查询工具之godepgraph(分析main.go的依赖树)
  • 机器学习08-损失函数
  • 【上位机——WPF】Window标签常用属性
  • 概率相关问题
  • win10电脑无法访问局域网内其他共享电脑文件的问题
  • 用C语言实现了——一个基于顺序表的插入排序演示系统
  • Java并发编程:锁机制
  • 数据库--处理模型(Processing Model)(二)
  • AWS CloudHSM:金融级密钥安全管理实战,如何通过FIPS 140-2认证守护数据生命线?
  • aws 实践创建policy + Role
  • 黑马程序员c++2024版笔记 第一章
  • Delphi 中 BPL(2):大型项目中 BPL 对性能的影响及调优策略
  • 2025年11月软考各科目难度及适合人群分析