CSSを使用してアニメーションを完了した後、DOMからdivを削除/隠しますか？

Question

私はdivがビューを滑らせるアニメーションを持っていますが、アニメーションが完了するとdivはビューの原点位置に戻ります。 divを完全に削除するか、CSSだけでアニメーションが終了した後で非表示にするにはどうすればいいですか？ここで

は、マークアップです：

<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は遷移なしで消えるだけです。

/* 
 

 
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：あなたの要求ごととして

、ここでのJavaScriptのバージョンがあります。そのような作業を達成するための無限の方法があります。私はバニラ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%; 
    } 
} 

はJavaScript：

// 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);