“动画延迟：1s;”时隐藏div延迟后仍在进行并显示答案

【问题标题】：Hide div when "animate-delay: 1s;" still ongoing and display after the delay“动画延迟：1s;”时隐藏div延迟后仍在进行并显示
【发布时间】：2013-12-20 01:49:22
【问题描述】：

我正在使用以下 CSS 文件向我正在构建的网站添加一些动画： http://www.justinaguilar.com/animations/scrolling.html

它的概念非常简单——你可以在你的 div 中添加类名，以便在你向上/向下滚动页面时让它动画化。

我想在那里添加一个调整，这将在每个动画之间添加一个轻微的延迟。这样，同一行中的所有动画将一个一个出现，而不是同时出现。

我的想法是添加一个类名，例如：delay-1，它会添加animate-delay: 1s；给它。

这是我想做的一个活生生的例子。向下滚动并查看“我们的进度”如何延迟显示每个动画：

http://demo.qodeinteractive.com/river/home-anchors/#home_presentation

这是我只能用 CSS3 做的事情吗？无论答案是肯定还是否定，我都非常感谢任何帮助。

【问题讨论】：

标签： javascript jquery html css frontend

【解决方案1】：

是的，CSS3 过渡可以解决问题，我很久以前就设置了一个演示页面。你可以参考一下。。

如您所见，第一项有 2s 延迟，第二项没有延迟。祝你好运

#demo:hover {
width: 300px;
transition-delay: 2s
}

#demo1:hover {
width: 300px;
transition-delay: 0s
}

http://jsfiddle.net/zFbkL/

【讨论】：

我在第一篇文章中提到的 CSS3 动画文件是使用关键帧，所以我的目标是让 div 处于可见性：无；而延迟正在进行中。延迟之后，我希望它再次成为可见性：可见性。但它不起作用。

【解决方案2】：

尝试像这样定义类：

.delay-1 {
    animation-delay:1s !important;
    -webkit-animation-delay:1s !important;
}

不知道它是否会起作用......但值得一试 ..是的......它会完成这项工作 - 它对我有用

【讨论】：

嗨，我正在使用关键帧。我试图在延迟时隐藏我的 div，然后再显示它。

【解决方案3】：

当您通过 Javascript 滚动到该部分时，您仍然需要向该部分添加一个类，但您可以使用 nth-child() 来定位每个类。

假设您可以执行 4 个步骤：

.steps .step:nth-child(1) { transition-delay: 1s; }
.steps .step:nth-child(2) { transition-delay: 2s; }
.steps .step:nth-child(3) { transition-delay: 3s; }
.steps .step:nth-child(4) { transition-delay: 4s; }

不过，我认为您最好将其编写脚本的步骤数未知。

$('.steps .step').each(function(i){
  $(this).css('animation-delay', i + 's');
});

然后，通过向.steps 添加一个类来触发动画。

.steps .step { trainsition: all 1s; opacity: 0; width: 0;}
.steps.in-view .step { opacity: 1; width: auto; }

希望这就是你的目标。

【讨论】：

您好比尔，感谢您的回复。我实际上正在使用关键帧。我的目标是在动画延迟时隐藏 div，并在之后显示它（可见性：可见）。这可能吗？
您不能为可见性设置动画。您可以为不透明度设置动画，这就是我在其中所拥有的。
我只想让 div 保持隐藏状态，并在延迟消失后显示出来。就像在示例中一样。