CSS 애니메이션이 'display: none'으로 설정된 요소와 함께 작동할 수 있나요?

CSS 애니메이션 및 표시 요소

처음에 display: none이 있는 요소에 CSS 애니메이션을 사용하려고 했습니다. 요소를 동적으로 표시하고 숨기는 간단한 접근 방식처럼 보일 수 있지만 CSS 제한으로 인해 이를 방지할 수 있습니다.

디스플레이 문제: 없음

CSS 애니메이션은 요소 간 전환을 처리할 수 없습니다. 디스플레이: 없음 및 디스플레이: 블록 또는 높이: 0과 높이: 자동 사이. 가능하면 높이를 하드코딩해야 하며, 그렇지 않으면 JavaScript를 사용해야 합니다.

높이 설정

높이를 하드코딩할 수 없는 상황에서는 오버플로를 사용할 수 있습니다. : 요소를 숨기려면 요소를 숨기고 높이를 0으로 설정합니다. 표시할 준비가 되면 오버플로를 다시 표시로 설정하고 높이를 최대로 애니메이션화합니다. 범위.

예제 코드

CSS:

#main-image {
  height: 0;
  overflow: hidden;
  background: red;
  animation: slide 1s ease 3.5s forwards;
}

@keyframes slide {
  from { height: 0; }
  to { height: 300px; }
}

HTML:

<div>

이 예에서 오버플로: 숨김은 높이가 0에서 0까지 애니메이션될 때 요소가 숨겨진 상태로 유지되도록 합니다. 300px.

참고: CSS 예제에서는 바닐라 CSS를 사용합니다. Animate.css를 사용하는 경우 @keyframes 규칙을 해당 Animate.css 클래스로 대체할 수 있습니다.

이 접근 방식을 사용하면 display: none 또는 jQuery에 의존하지 않고 요소에 원활하게 애니메이션을 적용할 수 있어 더욱 부드러운 전환이 가능합니다. 더욱 정밀한 타이밍 제어가 가능합니다.

위 내용은 CSS 애니메이션이 'display: none'으로 설정된 요소와 함께 작동할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!