コンテンツを圧縮せずにトランスフォームで高さをアニメートする方法

Question

私のプロジェクトでは、jQuery slideUp() を使用して、ユーザーがボタンをクリックしたときに 200 項目のリスト内の要素を上にスライドさせます。ただし、CSS 高さアニメーションにはリフローが必要であり、アニメーションが不安定になることが知られています。アニメーションはアプリケーションの不可欠な部分であり、アニメーションをスムーズに動作させるために多くの作業を行うつもりです。

CSS transform がスムーズに動作する方法であると判断しました。これは、CSS が GPU 上で処理され、一部の最新のブラウザーではメインスレッドから外れていて、重い JS 作業が変換に影響を与えないためです。 (私は重いJS作業をしています)。

CSS transition:transform を使用して、height プロパティをアニメーション化するだけの jQuery slideUp を複製する、きちんとしたソリューションを探しています。以下は私の試みですが、scale と translate が期待どおりに同期されていないようです。

リーリー リーリー リーリー

値にいくつかの変更を加え、content 変換を transform:scale(1, 3) translation(0, -50%);## に変更することで、そのようにしました。 ＃もっと近いです。

目標の達成にかなり近づいているように見えますが、完全には成功しませんでした。これを行うための既製のトリックはありますか?

＃＃＃必要とする：＃＃＃

JSはないほうがいいです

メインスレッドから離れます

Answer 1

数晩寝た後、私のニーズにぴったりのソリューションを見つけました。 div の 3 つのレイヤーを使用し、内側の 2 つのレイヤーが height: 100%; に設定されていることを確認する必要がありました。次に、scale() のチェックを外し、transform() を使用して中間層を上にスライドさせました。

これは私の要件を満たしています:

• Transform() を使用すると、GPU で最大 60fps で実行されるはずです
コンテンツの圧縮に
• Scale() は使用しません
jQueryのようにコンテンツが下から上に消えます
• SlideUp()
ターゲット要素の高さに関係なく、下の他の要素が上にスライドして隙間を埋めます
アニメーションがトリガーされると、JS は関与しなくなります

リーリー リーリー リーリー