width: 100% からトランジションするとトランジションがジャンプするのはなぜですか?

Question

この問題を再現するために JSFiddle を作成しました。ホバー時にグリッド要素を拡大させようとしていますが、別のグリッド要素の下に入り、予想どおりにジャンプするという奇妙な問題が発生します。なぜこのようなことが起こるのでしょうか?解決する方法はありますか？ .container{高さ:100vh;幅:100vw;表示:グリッド;グリッドテンプレート:1fr/1fr1fr;マージン:1em;グリッドギャップ:1em;}.box{

P粉613735289 · Answer

この効果については詳細な記事を書きました。CSS グリッドを使用してこの効果を実現する方法を学ぶためにぜひ読んでください: https://css-tricks.com/zooming-images-in -a-グリッドレイアウト/＃＃＃＃＃＃

リーリーリーリー

P粉189606269 · Answer

Flexbox と flex 短縮プロパティ :

を組み合わせることができます。リーリー＃＃＃それを試してみてください：＃＃＃

リーリーリーリー

width: 100% からトランジションするとトランジションがジャンプするのはなぜですか?

全員に返信(2)返信します