我正在实现的只是一个简单的弹性布局,带有左侧菜单和右侧的主屏幕。
演示:https://codesandbox.io/s/fragrant-sunset-fj80cz
单击切换按钮可以触发左侧菜单的 CSS 转换以使其打开。
但是有一个性能问题,我知道因为它是宽度属性转换。
打开 devtool 并在 CPU 上设置 4 倍减速可以获得滞后动画
我知道有一个 FLIP 技术可以提高 css 过渡性能, https://css-tricks.com/animating-layouts-with-the-flip-technique/ 但由于盒子里有内容,使用比例变换来模拟宽度过渡会使它看起来不自然。
那么有没有其他方法可以提高这种过渡性能呢?
CSS 动画通常比 CSS 过渡更快,因为它们针对连续运动进行了优化。您还可以使用 steps() 函数来创建看起来像过渡的逐帧动画。