Css transition-property：トランスフォームのみ？

私はCSSトランジションCss transition-property：トランスフォームのみ？

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

それはうまく動作しますが、Flexはトランジションの下にもあるので、それは外観を遅くし、他のパフォーマンスの問題が発生すると、サイドバーをアニメーション化したいと思います。

最終的にはtransition: transform .5s easeを試しましたが、動作しません。

更新

現在transition: transform作品が、時間から時間までかなりunepected。あなたはそれがパフォーマンスを遅くすることができますようtransition: allを利用するのは避けるべきコメントで述べたようにショートビデオ参照 http://screencast-o-matic.com/watch/cDlDYKQZCY

出典

2016-12-16 Sergey Khmelevskoy

'transition：all'は遅く、移行しようとしているものを正確にターゲットにする必要があります。それでもまだパフォーマンスの問題がある場合は、 'translateX'から' translate3d'に移動してみてください。ハードウェアアクセラレーションが有効になっていると、パフォーマンスが向上します。 –

@Press Xは3Dのショートカットではないですか？翻訳はGPUも高速化していると思います。それは今翻訳されているので、まったく予想外のことです。わからない理由http://screencast-o-matic.com/watch/cDlDYKQZCY –

IIRC Xはtranslate（x、y）の短縮形であり、まだ2Dであるため、アクセラレーションはありません。 –

。あなたのトランジションで可能な限り具体的になるようにしてください。

また、translateX(x)の代わりにtranslate3d(x,y,z)を使用して、2Dから3Dへのトランジションを移動して、有効/使用可能になったときにハードウェアアクセラレーションを使用します。

出典

2016-12-16 21:03:34

Css transition-property：トランスフォームのみ？

答えて

関連する問題