Question

我正在尝试使用比例转换替换我的CSS转换（高度）以提高性能。这就是我所拥有的：

#primaryNav {
    height: auto;
    transition: transform 0.5s;
}

.nav-small {
    transform: scale(1,0.5); 
}

现在这个效果非常好但是.nav-small里面的子元素也是缩放的，这很痛苦 - 任何想法都会受到高度赞赏

Answer 1

不要使用transform，而是尝试使用clip，这样可以在现代浏览器中为您提供与transform相似的性能。 clip CSS规则的工作原理是定义一个有效地切掉它所应用元素的一部分的框。

从css triggers，我们可以看到height中的更改会触发昂贵的重排，重新绘制和复合，这可能会导致您的性能问题。与transform中的更改一样，clip中的更改不会触发任何这些代价高昂的浏览器事件。总而言之，clip（很像transform）在浏览器资源上比height更快/更轻，因此这可以为您提供所需的性能提升。

要更新现有代码，您可以使用以下内容：

#primaryNav {
    height: 100px;
    transition: clip 0.5s;
    clip: rect(0px, 0px, 100px, 0);
}

.nav-small {
    clip: rect(0px, 0px, 50px, 0);
}

唯一的缺点是您需要知道导航的原始高度（或使用JavaScript获取），以便您可以设置clip的初始值。

用过渡比例替换CSS过渡高度

1 个答案: