問題タブ [react-spring]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

404 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
0 に答える
156 参照

css - スケール アニメーションの後に div のコンテンツが左にシフトする

mouseOver と mouseLeave で scale() 変換 (react-spring を使用) を適用した後、元の scale(1) 位置に戻った後、div の内容が 1 または 2 ピクセル左にシフトする div があります。

div の動作の GIF

カード コンポーネントは次のとおりです (styled-components を使用):

そして、これがレンダリングされている場所です：

どんな洞察も深く感謝します!

編集: mouseOut スケールを 1.0前後、つまり 1.00001 または 0.99999 のままにしておくと、説明したように内容がシフトしないことを追加する必要があります。理想的には、このハックに頼らずにこれを修正したいのですが、このままにしておくと、パフォーマンスの低下が予想されますか?


12345678910