마우스를 올리면 콘텐츠 표시(카드 높이에는 영향을 주지 않음)

Question

마우스를 올리면 표시되는 콘텐츠가 포함된 블록이 있습니다. 효과가 작동하는 방식은 다음과 같습니다:

• .hoverCard 기본 콘텐츠는 기본적으로 표시됩니다(.hoverCard__showOnHover의 콘텐츠는 숨겨짐) 사용자가 .hoverCard 위로 마우스를 가져가면 .hoverCard__showOnHover 显示其内容，并且 .hoverCard__body 위로 전환됩니다("개방" 효과 제공)
• 내 데모에서 위의 시각적 효과를 볼 수 있지만 애니메이션이 완벽하게 작동하도록 할 수는 없습니다.

내가 겪은 문제는 다음과 같습니다.

• 높이가 100px인 visibility:hidden、opacity:0 和 height:0 仍然为 .hoverCard__showOnHover 保留空间。这意味着，如果默认情况下，.hoverCard__body 的底部填充量为 40px，而 .hoverCard__showOnHover를 사용하면 사용자가 140px 공간을 보기 위해 .hoverCard 위로 마우스를 가져갈 필요가 없습니다
• 공간 예약을 방지하는 유일한 방법은 디스플레이: 없음을 사용하는 것입니다. 그러나 카드 위로 마우스를 가져갈 때 콘텐츠를 표시하려면 표시 속성을 지정해야 합니다. 이렇게 하면 카드에 점프 효과를 줄 수 있습니다(호버 시 높이가 도입되기 때문입니다). 이 외에도 내 카드의 높이도 커집니다. (.hoverCard 데모처럼 커지는 것보다 콘텐츠가 나타나고 열리는 효과를 원합니다)
• 위 문제를 해결하기 위해 GSAP 逐渐赋予 .hoverCard__showOnHover 높이를 사용해 보았습니다. 하지만 여전히 위의 문제가 있으므로 운이 좋지 않습니다

이 문제를 해결할 방법이 있나요? 반드시 GSAP를 사용하는 것은 아니며, 위의 문제를 해결하기 위해 GSAP를 사용해 보았습니다.

으아아아 으아아아 으아아아

카드의 기본 버전이 시각적으로 어떻게 보이는지(오른쪽 카드)와 마우스 오버 상호작용이 어떻게 작동하는지(왼쪽 카드)는 다음과 같습니다.

카드 높이는 증가하지 않았습니다. 대신 본문이 카드 내에서 위로 이동하여 내용이 표시됩니다.

편집자:

Kooilnc의 답변에 따르면:

으아아아 으아아아

또한 max-height: 100px;에 대한 숫자를 정의해야 하나요? 콘텐츠 크기를 알 수 없고 동적이어야 하는 경우에는 어떻게 되나요?

편집 2

최신 방법:

으아아아 으아아아

위 내용:

• 이 결과는 .hoverCard__body 上方出现不必要的空格（应仅填充顶部 30px)입니다.
• 입장 애니메이션이 튕깁니다(콘텐츠가 방금 등장해서 번역이 원활하지 않습니다)
• 종료 애니메이션 높이도 빠르게 낮아집니다(표시 없음 속성이 적용되기 때문)

Answer 1

요령은 표시할 텍스트를 max-height: 0 和 overflow: hide로 설정하는 것입니다. 이것은 최소 재현 가능한 예입니다.

으아악 으아악