如何提高 dom 元素 css 宽度过渡的性能,其中包含大量内容

问题描述 投票:0回答:1

我正在实现的只是一个简单的弹性布局,带有左侧菜单和右侧的主屏幕。

演示:https://codesandbox.io/s/fragrant-sunset-fj80cz

单击切换按钮可以触发左侧菜单的 CSS 转换以使其打开。

但是有一个性能问题,我知道因为它是宽度属性转换。

打开 devtool 并在 CPU 上设置 4 倍减速可以获得滞后动画

我知道有一个 FLIP 技术可以提高 css 过渡性能, https://css-tricks.com/animating-layouts-with-the-flip-technique/ 但由于盒子里有内容,使用比例变换来模拟宽度过渡会使它看起来不自然。

那么有没有其他方法可以提高这种过渡性能呢?

css performance css-transitions
1个回答
0
投票

CSS 动画通常比 CSS 过渡更快,因为它们针对连续运动进行了优化。您还可以使用 steps() 函数来创建看起来像过渡的逐帧动画。

© www.soinside.com 2019 - 2024. All rights reserved.