CSS만 사용하여 디스플레이: 없음으로 Div에 애니메이션을 적용하는 방법은 무엇입니까?

디스플레이가 포함된 CSS 애니메이션: 없음 딜레마

CSS 애니메이션으로 작업할 때 나중에 div를 삽입하고 싶은 상황이 발생할 수 있습니다. 다른 요소가 처음에는 공간을 채우는 동안. 그러나 애니메이션 div를 표시: 없음으로 설정하면 계속해서 공간을 차지하고 다른 요소가 제대로 흐르지 못하게 됩니다.

이 문제를 해결하려면 애니메이션 div가 제대로 흐르지 않도록 하는 방법이 필요합니다. 지정된 시간이 나타날 때까지 공간을 차지하지 마십시오. jQuery 사용을 고려할 수도 있지만 이 기사에서는 더 부드럽고 제어된 타이밍을 위한 순전히 CSS 솔루션에 중점을 둡니다.

높이 하드코딩

핵심은 jQuery의 높이를 하드코딩하는 데 있습니다. 애니메이션 div. 이런 방식으로 자체적으로 표시되지 않고 필요한 공간을 확보합니다. 그런 다음 CSS 애니메이션을 사용하여 적절한 순간에 높이를 변경할 수 있습니다.

예를 들어 다음 코드를 고려해 보세요.

#main-image {
    height: 0;
    overflow: hidden;
    transition: height 1s ease 3.5s;
}

키프레임이 있는 애니메이션

높이가 고정되면 키프레임을 사용하여 변경 사항에 애니메이션을 적용할 수 있습니다. 예는 다음과 같습니다.

#main-image.fadeInDownBig {
    height: 300px;
}

이 예에서는 fadeInDownBig 클래스가 원하는 시간에 기본 이미지 div에 적용되어 의도한 높이로 전환이 트리거됩니다.

브라우저 지원 및 데모

이 CSS 전용 솔루션은 최신 브라우저에서 잘 작동합니다. 다음 링크에서 라이브 데모를 볼 수 있습니다:

• http://jsfiddle.net/duopixel/qD5XX/

이 링크를 사용하면 기술을 사용하면 display: none의 문제 없이 부드러운 CSS 애니메이션을 얻을 수 있으므로 div가 다음과 같이 원활하게 흐르도록 할 수 있습니다. 의도했습니다.

위 내용은 CSS만 사용하여 디스플레이: 없음으로 Div에 애니메이션을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!