将CSS过渡高度替换为过渡比例

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触发器中，我们可以看到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的初始值。