用轉換比例替換CSS轉換高度

我試圖用縮放轉換替換我的CSS轉換（高度）以提高性能。這是我有：用轉換比例替換CSS轉換高度

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

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

現在這個作品真的很好，但裏面.nav小也縮放這是一種痛苦的子元素 - 任何想法，將不勝感激

來源

2015-08-21 rhysclay

'scale'會在技術上擴展自己和它裏面的一切。我能想到的唯一選擇就是將「尺度」應用於兒童，以便當你在家長中進行縮放時，你必須按比例調整兒童的身高。但我不確定這是否是一個好主意，因爲它可能會引入不想要的結果（例如兒童元素中的文本模糊）。你能分享一個小提琴嗎？ –

我的解決方案有沒有最終爲你工作？ –

而不是使用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。

來源

2015-08-22 00:21:51

用轉換比例替換CSS轉換高度

回答

相關問題