Css轉換屬性：僅轉換？

我想用CSS過渡Css轉換屬性：僅轉換？

.site-config 
    flex: 0 1 0 
    overflow: hidden 
    transform: translateX(100%) 
    transition: all .4s ease-in 
    &.active 
    flex: 2 1 40% 
    transform: translateX(0)

它運作良好，但因爲撓也正在轉變，它會減慢外觀，並導致其他性能問題的動畫工具條。我試過transition: transform .5s ease，但它不起作用。

更新

目前transition: transform作品，但相當unepected不時。短視頻參考 http://screencast-o-matic.com/watch/cDlDYKQZCY

來源

2016-12-16 Sergey Khmelevskoy

'過渡：所有'是緩慢的，你應該確切地瞄準你想要過渡。如果您仍然遇到性能問題，請嘗試從'translateX'移至'translate3d'。如果啓用了硬件加速，它應該可以提高性能。 –

@Press不是X只是3D的快捷方式？我認爲翻譯也是GPU加速的。這就是現在翻譯的方式，非常出乎意料。我不知道爲什麼http://screencast-o-matic.com/watch/cDlDYKQZCY –

IIRC X是translate（x，y）的簡寫，並且仍然是2D，所以沒有加速。 –

正如在評論中所討論的，你應該儘量避免使用transition: all，因爲它會降低性能。嘗試儘可能具體地與你的轉換。

另外，通過使用translate3d(x,y,z)而不是translateX(x)，可以在啓用/可用時利用硬件加速來移動從2D到3D的轉換。

來源

2016-12-16 21:03:34

Css轉換屬性：僅轉換？

回答

相關問題