ホバー時にコンテンツを表示します (カードの高さには影響しません)

Question

ホバー時に表示されるコンテンツを含むブロックがあります。エフェクトの動作方法は次のとおりです:

• .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 に徐々に高さを与えてみました。しかし、上記の問題がまだ残っているため、運が悪いです。

この問題を解決する方法はありますか?必ずしも GSAP を使用する必要はありませんが、上記の問題を解決するために GSAP を試してみました。

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

カードのデフォルト バージョンが視覚的にどのように見えるか (右側のカードに表示)、およびホバー インタラクションがどのように機能するか (左側のカード) を次に示します。

カードの高さは増加しないことに注意してください。代わりに、本体が (カード内で) 上に移動して内容が表示されます。

＃＃＃編集：＃＃＃

Kooilnc の回答に基づく:

リーリー リーリー

また、

max-height: 100px;

の数値を定義する必要がありますか?コンテンツのサイズが不明で、動的にする必要がある場合はどうすればよいでしょうか?

編集2 最新の方法:

リーリー リーリー

上記の内容を渡します:

これにより、

.hoverCard__body

の上に不要なスペースができてしまいます (これは上部の

30px
• のみを埋める必要があります)。 エントリアニメーションジャンプ (コンテンツが表示されたばかりのため、翻訳がスムーズではありません) 終了アニメーションの高さもすぐに下がります (display none 属性が有効になっているため)

Answer 1

秘訣は、表示するテキストを max-height: 0 および overflow: Hide に設定することです。これは 最小限の再現可能な例 です。

リーリー リーリー