使用CSS完成动画后，从DOM中删除/隐藏div吗？ [英] Remove/Hide div from DOM after animation completes using CSS?

问题描述

我有一个动画，其中div从视图中滑出，但是当动画完成时，div只是返回到其在视图中的原始位置。如何仅使用CSS在动画结束后完全删除div或将其隐藏？

I have an animation where a div slides out the view, however when the animation is completed, the div just returns to its origin position in the view. How do I totally remove the div or hide it after the animation ends using just 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％时消失。

I don't want it to fade out over the duration of the animation, i just want it to disappear once it hits 100% in the keyframe. Thanks ahead of time!

推荐答案

使用 animation-fill-mode 选项。将其设置为前进，动画将以其最终状态结束并保持原样。

Use the animation-fill-mode option. Set it to forwards and the animation ends at it's final state and stay like that.

根据评论进行修改：将不透明度淡出设置为动画的最后1％...简化了关键帧。添加了一个jquery选项，以从字面上从DOM中删除div。

Altered based upon comments Set opacity fade to just last 1% of animation... simplified keyframes. Added a jquery option to literally remove the div from the DOM. CSS alone won't alter the markup, where jQuery will.

尽管您无法为 display 属性设置动画，但仅使用CSS不会改变标记。 。如果您希望div完全消失，则在不透明度变为零后，可以添加display属性以删除div。如果您不等待不透明度结束，则div将会消失而不会发生任何过渡。

Although you can't animate the display property. If you want the div totally gone, after the opacity fades to zero, you can then add the display property to remove the div. If you don't wait for opacity to end, the div will just vanish without any transition.

/* 

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;
  
  /*
	animation-name: slide;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	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>

这篇关于使用CSS完成动画后，从DOM中删除/隐藏div吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！