html - Css 效果滑入滑出

Question

我正在尝试创建向上/向下滑动或向右/向左滑动的动画，但我无法让它工作。一段时间后如何用滑动效果隐藏第一个div？如何在动画中显示播放

一些帮助将不胜感激，这就是我正在做的

<div id="div1">Fist div</div> 
<div id="div2">Second div </div>


#div1{

 animation: slideup 7s;
    -moz-animation: slideup 7s;
    -webkit-animation: slideup 7s;
    -o-animation: slideup 7s;
}

#div2
{
    position:relative;
}

@keyframes slideup
{
0%   {top:0px;}
75%  {top:0px;}
100% {top:-20px;}
}

@-moz-keyframes slideup
{
0%   {top:0px;}
75%  {top:0px;}
100% {top:-20px;}
}

@-webkit-keyframes slideup
{
0%   {top:0px;}
75%  {top:0px;}
100% {top:-20px;}
}

@-o-keyframes slideup
{
0%   {top:0px;}
75%  {top:0px;}
100% {top:-20px;}
}

Answer 1

仅使用 CSS 和 HTML 无法做到这一点。然而，使用 JavaScript 是可能的。使用 JavaScript，您可以使用事件监听器检测动画何时结束。然后你可以删除或隐藏你想要的 div。

var div = document.getElementById("div1");
//add the event listener
div.addEventListener("animationend", function(event){
    document.getElementById("div2").style.display = "none";
});

//you will need to explicitly add the class that contains the animation
div.classList.addClass("animate");

将您的 CSS 更改为在类 .animate 上声明，而不是在 #div1 上声明。另外，请注意浏览器前缀。更多详情 refer to this link .