私のプロジェクトでは、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はないほうがいいです

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