CSS를 사용하여 애니메이션이 완료된 후 DOM에서 div를 제거/숨 깁니까?

Question

div가 뷰 밖으로 슬라이드하는 애니메이션이 있지만 애니메이션이 완료되면 div가 뷰의 원점 위치로 돌아갑니다. CSS를 사용하여 애니메이션이 끝난 후 div를 완전히 제거하거나 숨기려면 어떻게해야합니까?

<div class="container"> 
    <div class="slide-box" id="slide-box""></div> 
    </div> 

와 CSS :

.slide-box { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    background-image: url(../pics/red.png); 
    background-position: center; 
    background-size: cover; 
    background-repeat: no-repeat; 

    animation: slide 5s linear 1; 
} 
@keyframes slide { 
    0% { 
    left: 0; 
    } 
    20% { 
    left: 20%; 
    } 
    40% { 
    left: 40%; 

    } 
    60% { 
    left: 60%; 

    } 
    80% { 
    left: 80%; 
    } 
    100% { 
    left: 100%; 
    overflow: hidden; 
    visibility: hidden; 
    } 
} 

가 난 그냥 원하는,이 애니메이션의 기간에 걸쳐 퇴색하지 않으 여기

는 마크 업입니다 키 프레임에서 100 %에 도달하면 사라집니다. 미리 감사드립니다!

Answer 1

사용 animation-fill-mode 옵션을 선택합니다. forwards으로 설정하면 애니메이션이 최종 상태로 끝나고 그대로 있습니다.

댓글에 따라 변경됨 불투명도를 애니메이션의 마지막 1 % ... 단순화 된 키 프레임으로 설정하십시오. 글자 그대로 DOM에서 div를 제거하기위한 jquery 옵션이 추가되었습니다. CSS만으로는 jQuery의 마크 업을 변경하지 않습니다.

display 속성을 애니메이션으로 만들 수는 없지만. div가 완전히 이되도록하려면, 불투명도가 0으로 사라진 후에 display 속성을 추가하여 div를 제거 할 수 있습니다. 불투명도가 끝나기를 기다리지 않으면 div가 전환없이 사라집니다. [마지막 프레임 CSS3 애니메이션을 중지]의

/* 
 

 
This jquery is added to really remove 
 
the div. But it'll essentially be 
 
VISUALLY gone at the end of the 
 
animation. You can not use, or 
 
delete the jquery, and you really 
 
won't see any difference unless 
 
you inspect the DOM after the animation. 
 

 
This function is bound to animation 
 
and will fire when animation ends. 
 
No need to "guess" at timeout settings. 
 
This REMOVES the div opposed to merely 
 
setting it's style to display: none; 
 

 
*/ 
 

 
$('.slide-box').bind('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(e) { $(this).remove(); });

.slide-box { 
 
    display: block; 
 
    position: relative; 
 
    left: 0%; 
 
    opacity: 1; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #a00; 
 
    animation: slide 1s 1 linear forwards; 
 
    
 
    /* 
 
\t animation-name: slide; 
 
\t animation-duration: 1s; 
 
\t animation-iteration-count: 1; 
 
\t animation-timing-function: linear; 
 
\t animation-fill-mode: forwards; 
 
*/ 
 
} 
 

 
@keyframes slide { 
 
    0% { 
 
    left: 0%; 
 
    opacity: 1; 
 
    } 
 
    99% { 
 
    left: 99%; 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    left: 100%; 
 
    opacity: 0; 
 
    display: none; 
 
    } 
 
} 
 

 
@-webkit-keyframes slide { 
 
    0% { 
 
    left: 0%; 
 
    opacity: 1; 
 
    } 
 
    99% { 
 
    left: 99%; 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    left: 100%; 
 
    opacity: 0; 
 
    display: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="slide-box" id="slide-box"></div> 
 
    </div>

Answer 2

animation: slide 5s linear forwards; 

opacity: 0; 
display: none; 

% 100이보십시오.

근무 바이올린 : https://jsfiddle.net/jbtfdjyy/1/

UPDATE : JS 마니

var slideBox = document.getElementById('slide-box'); 

setTimeout(function(){ 
    slideBox.style.display = 'none'; 
}, 5000); 

이보십시오. https://jsfiddle.net/jbtfdjyy/2/

Answer 3

키 프레임에 99 % 정도를 추가하고 불투명도를 1로 설정하십시오. 처음에 opacity: 1이있는 경우 99 %까지 그대로 유지됩니다. 100 % 만 변경됩니다.

기술적으로 100 % 해고 된 것은 아닙니다. 원한다면 여기 JavaScript를 사용하는 것이 좋겠지 만 이것은 적어도 당신이 원하는 환상을 줄 것입니다.

@keyframes slide { 
    0% { 
    left: 0; 
    } 
    20% { 
    left: 20%; 
    } 
    40% { 
    left: 40%; 
    } 
    60% { 
    left: 60%; 
    } 
    80% { 
    left: 80%; 
    } 
    99% { 
    opacity: 1; 
    } 
    100% { 
    left: 100%; 
    overflow: hidden; 
    opacity: 0; 
    display: none; 
    visibility: hidden; 
    } 
} 

UPDATE : 귀하의 요청에 따라

가 여기에 자바 스크립트 버전입니다. 이러한 작업을 수행하는 데는 끝없는 방법이 있습니다. 바닐라 JS (jQuery 등 없음)를 사용하고 있고 ES6 구문을 사용하고 있습니다.

우리가 여기에서하는 일은 시간 초과를 설정하고 그 시간 만료 후 나는 animation_end 이벤트를 방송합니다. 이 이벤트 리스너는 애니메이션의 끝을 처리합니다 (이 경우에는 페이드 아웃을 처리 할 클래스를 추가합니다). 이것은 당신이 필요로하는 것보다 훨씬 세분화 된 것입니다. 단순히 setTimeout 내에 클래스를 추가하는 것만으로도 가능 합니다만, 애니메이션 시작과 같은 이벤트로 추상화 할 수 있으므로이 방법이 약간 더 좋다고 생각합니다. 기타여기

는 바이올린입니다 : https://jsfiddle.net/vmyzyd6p/

HTML :

<div class="container"> 
    <div class="slide-box" id="slide-box""></div> 
</div> 

CSS :

.slide-box { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    animation: slide 3s linear 1; 
    -webkit-transition: opacity 2s ease-in-out; 
    -moz-transition: opacity 2s ease-in-out; 
    transition: opacity 2s ease-in-out; 
} 
.animationEnd { 
    opacity: 0; 
} 
@keyframes slide { 
    0% { 
    left: 0; 
    } 
    20% { 
    left: 20%; 
    } 
    40% { 
    left: 40%; 

    } 
    60% { 
    left: 60%; 

    } 
    80% { 
    left: 80%; 
    } 
    100% { 
    left: 100%; 
    } 
} 

자바 스크립트 :

// Create a function that handles the `animation_end` event 
const animationEnd =() => { 
    // Grab the slidebox element 
    let slideBox = document.getElementById('slide-box'); 

    // Get the class of the slidebox element 
    let slideClass = slideBox.getAttribute('class'); 

    // Add the animation end class appended to the previous class 
    slideBox.setAttribute('class', slideClass + ' animationEnd'); 
}; 

// Create the animation end event 
let animationEndEvent = new Event('animation_end'); 

// Cross browser implementation of adding the event listener 
if (document.addEventListener) { 
    document.addEventListener('animation_end', animationEnd, false); 
} else { 
    document.attachEvent('animation_end', animationEnd); 
} 

// Set the timeout with the same duration as the animation. 
setTimeout(() => { 
     // Broadcast the animation end event 
     document.dispatchEvent(animationEndEvent); 
}, 3000);