CSS动画-向上滑动div,等待5秒钟,然后向下

时间:2018-08-05 15:41:52

标签: css animation sass css-animations

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

到目前为止,我在这里弄弄我做过的事。

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

非常感谢

1 个答案:

答案 0 :(得分:0)

您可以使用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>