让一个 div 向上滑动，等待 5 秒，然后使用 CSS Animation 向下滑动

Question

目标是让div 向上滑动，等待 5 秒然后向下滑动。

这是我迄今为止所做的事情。

https://jsfiddle.net/j95aeduL/32/

Answer 1

您可以使用 jQuery 轻松做到这一点。

使用.slideUp() 方法，您将能够以向上滑动的方式折叠包含内容的 div。然后使用.delay() 可以设置5 秒的延迟。要再次显示内容，请致电.slideDown()。 当您链接这些动画时，执行此操作的代码如下所示：$('.content').slideUp(500).delay(5000).slideDown(500);

需要指出的是，在使用此代码时，最好在动画或延迟正在进行时禁用按钮再次单击。否则，一旦第一个序列完成，将触发另一个序列。

这是一个工作示例。

$(document).ready(function() {
  $('button').click(function() {
    $('.content').slideUp(500).delay(5000).slideDown(500);
  });
});

.content {
  height: 200px;
  background-color: #19c63c;
  border: 1px solid #169630;
  margin: 20px;
  padding: 20px;
  opacity: 1;
}

.hide {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Start</button>
<div class="content">content to display...</div>

如果您不想使用 jQuery 的动画，您可以使用 CSS 创建自己的动画。在这种情况下，您将创建一个 .hide 类。当它被添加到一个 div 时，它会触发上滑动画。 5 秒后，您再次将其移除。用于动画过渡的 CSS 是 transition: all .3s ease-out;

代码如下。

var delay = 5000; // delay in milliseconds

$(document).ready(function() {
  $('button').click(function() {
    $('.content').addClass('hide');
    setTimeout(function() {
      $('.content').removeClass('hide');
    }, delay);
  });
});

.content {
  height: 200px;
  background-color: #19c63c;
  border: 1px solid #169630;
  margin: 20px;
  padding: 20px;
  transition: all .3s ease-out;
}

.hide {
  height: 0;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Start</button>
<div class="content">content to display...</div>

如果你想只用 CSS 来解决这个问题。你可以使用类似下面的东西。另见this JSFiddle。注意：动画立即开始。

.content {
  background-color: #ccc;
  height: 200px;
}

.slide-up-wait-down-animation {
  animation: pulse 6000ms;
}


@keyframes pulse {
  0% { height: 200px }
  10% { height: 0; opacity: 0; }  
  90% { height: 0; opacity: 0 }
  100% { height: 200px }
}

<div class="content slide-up-wait-down-animation">content to display...</div>