CSS 전환을 사용하여 지연 후 요소를 자동으로 숨기려면 어떻게 해야 합니까?

DDD
풀어 주다: 2024-11-09 13:38:02
원래의
404명이 탐색했습니다.

How Can I Use CSS Transitions to Automatically Hide Elements After a Delay?

CSS 전환: 지연 후 자동으로 요소 숨기기

특정 시간 간격 후에 웹페이지에서 요소를 숨기는 방법은 다양합니다. jQuery는 간단한 솔루션을 제공하지만 CSS 전환은 동일한 결과를 얻기 위한 혁신적인 대안을 제공합니다.

접근 방식:

다음과 같은 속성에 직접 애니메이션을 적용하는 CSS 전환의 한계에도 불구하고 디스플레이에서는 애니메이션을 활용하고 요소를 조작하여 요소 숨기기를 시뮬레이션할 수 있습니다. 가시성.

구현:

  1. @keyframes를 사용하여 원하는 지속 시간(이 경우 5초) 동안 CSS 애니메이션을 만듭니다.
  2. 애니메이션 내에서 요소의 높이와 너비를 0으로 설정하면 요소가 사라지게 됩니다.
  3. 사용 애니메이션 채우기 모드: 앞으로; 애니메이션이 끝난 후에도 요소가 숨겨진 상태로 유지되도록 합니다.
  4. 애니메이션 지연(5초) 후 가시성:숨김을 전환합니다. 요소에 대해 뷰에서 완전히 제거합니다.

Fiddle:

다음 바이올린은 CSS 구현을 보여줍니다.

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    animation: cssAnimation 0s ease-in 5s forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
로그인 후 복사
<div>
로그인 후 복사

이 기술은 지정된 시간 간격이 지나면 요소를 효과적으로 숨겨 요소가 화면의 보이는 공간을 차지하지 않도록 합니다. 페이지.

위 내용은 CSS 전환을 사용하여 지연 후 요소를 자동으로 숨기려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿