ホバー時にコンテンツを表示します (カードの高さには影響しません)
ホバー時に表示されるコンテンツを含むブロックがあります。エフェクトの動作方法は次のとおりです:
.hoverCard基本的なコンテンツはデフォルトで表示されます (.hoverCard__showOnHover のコンテンツは非表示になります)。 ユーザーが .hoverCard の上にカーソルを置くと、その時点で.hoverCard__showOnHoverがその内容を表示し、.hoverCard__bodyが上に遷移します (「開く」効果が与えられます)- 私のデモでは上記の視覚効果を見ることができますが、アニメーションを完全に動作させることはできません。
私が遭遇した問題は次のとおりです:
visibility:hidden、opacity:0、height:0を使用して、.hoverCard__showOnHover用のスペースを確保します。これは、デフォルトで、.hoverCard__bodyの下部パディングが 40 ピクセルで、.hoverCard__showOnHoverの高さが 100 ピクセルの場合、ユーザーが .hoverCard の上にマウスを移動する必要がないことを意味します。つまり、140ピクセルのスペースが表示されます- 私が知っているスペース予約を防ぐ唯一の方法は、display: none を使用することです。ただし、カードの上にホバーしたときにコンテンツを表示するには、表示プロパティを与える必要があります。これにより、カードにジャンプ効果が与えられます (ホバー時に高さが導入されるため)。これに加えて、カードの高さも増加します (デモのように .hoverCard が成長するのではなく、コンテンツが表示されて上に開く効果が必要です)
- 上記の問題を解決するために、
GSAPを使用して、.hoverCard__showOnHoverに徐々に高さを与えてみました。しかし、上記の問題がまだ残っているため、運が悪いです。
リーリー リーリー リーリー
カードのデフォルト バージョンが視覚的にどのように見えるか (右側のカードに表示)、およびホバー インタラクションがどのように機能するか (左側のカード) を次に示します。
カードの高さは増加しないことに注意してください。代わりに、本体が (カード内で) 上に移動して内容が表示されます。
＃＃＃編集：＃＃＃Kooilnc の回答に基づく:
リーリー リーリー
また、
max-height: 100px;の数値を定義する必要がありますか?コンテンツのサイズが不明で、動的にする必要がある場合はどうすればよいでしょうか?
編集2
最新の方法:
リーリー リーリー
上記の内容を渡します:
これにより、
.hoverCard__body
の上に不要なスペースができてしまいます (これは上部の- 30px
- のみを埋める必要があります)。
