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％...简化的关键帧。添加了一个jquery选项，从字面上删除DOM中的div。单独的CSS不会改变标记，jQuery会在其中。

虽然您无法为display属性设置动画。如果你希望div完全消失，在不透明度渐变为零之后，你可以添加display属性来删除div。如果你不等待不透明度结束，div就会消失而没有任何过渡。

＆＃13;

/* 

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(); });

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

animation: slide 5s linear forwards;

100％

opacity: 0;
display: none;

试试这个。

工作小提琴：https://jsfiddle.net/jbtfdjyy/1/

更新：JS mani

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;
  }
}

<强>更新

根据您的要求，这是一个JavaScript版本。请记住，有无尽的方法来完成这样的任务。我正在使用vanilla 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);

使用CSS完成动画后，从DOM中删除/隐藏div？

3 个答案: