从 0 不透明度交错淡入 div答案

【问题标题】：Staggered fade-in divs from 0 opacity从 0 不透明度交错淡入 div
【发布时间】：2016-05-28 00:46:15
【问题描述】：

我根据页面上的航点淡入了三个 div。我正在尝试错开这些 div。我遇到的问题是因为我将它们从不透明度淡入：0，一旦添加了“动画”类，所有的 div 都会显示（然后延迟的 div 将从不透明度播放它们的动画：1）。这可能是一个愚蠢的问题，但我想不出一种方法来延迟第二个和第三个 div 的不透明度，而不必给它们单独的动画类。任何帮助将不胜感激！

.project {
  opacity: 0;
}

.project.animated {
  opacity: 1;
  animation-name: fadeInDown;
  animation-duration: 1s;

  &:nth-child(2) {
    animation-delay: .3s;
  }
  &:nth-child(3) {
    animation-delay: .6s;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -40%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

编译后的 CSS：

.project {
  opacity: 0;
}
.project.animated {
  opacity: 1;
  animation-name: fadeInDown;
  animation-duration: 1s;
}
.project.animated:nth-child(2) {
  animation-delay: .3s;
}
.project.animated:nth-child(3) {
  animation-delay: .6s;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -40%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

【问题讨论】：

我已经编辑了您的问题并添加了编译后的 CSS 代码，因为不是每个人都熟悉 Sass/Less 语法（这会导致很多 cmets 质疑语法、混淆）。除非问题出在预处理器本身，否则最好发布已编译的 CSS。

标签： css animation css-animations

【解决方案1】：

选项 1：

从.animated 类中删除opacity: 1 并添加animation-fill-mode: forwards。此设置意味着动画元素将保持其最后一个关键帧（具有opacity: 1）的状态，因此不需要额外的属性设置。

window.onload = function() {
  setTimeout(function() {
    var els = document.querySelectorAll('.project');
    for (var i = 0; i < els.length; i++) {
      els[i].classList.add('animated');
    }
  }, 100);
}

.project {
  opacity: 0;
}
.project.animated {
  /*opacity: 1;*/
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.project.animated:nth-child(2) {
  animation-delay: .3s;
}
.project.animated:nth-child(3) {
  animation-delay: .6s;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -40%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* just for demo */

.project {
  height: 100px;
  width: 100px;
  background: red;

<div class='project'>First</div>
<div class='project'>Second</div>
<div class='project'>Third</div>

选项 2：

如果出于某种原因您不想从.animated 类中删除opacity: 1，则将animation-fill-mode: backwards 设置为元素。这将使动画元素在 animation-delay 期间保持其第一个关键帧 (opacity: 0) 中提到的状态，因此该元素不会立即显示。

window.onload = function() {
  setTimeout(function() {
    var els = document.querySelectorAll('.project');
    for (var i = 0; i < els.length; i++) {
      els[i].classList.add('animated');
    }
  }, 100);
}

.project {
  opacity: 0;
}
.project.animated {
  opacity: 1;
  animation-name: fadeInDown;
  animation-duration: 1s;
  animation-fill-mode: backwards;
}
.project.animated:nth-child(2) {
  animation-delay: .3s;
}
.project.animated:nth-child(3) {
  animation-delay: .6s;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -40%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* just for demo */

.project {
  height: 100px;
  width: 100px;
  background: red;

<div class='project'>First</div>
<div class='project'>Second</div>
<div class='project'>Third</div>

【讨论】：

【解决方案2】：

.project.animated {
  opacity: 1; <- REMOVE THIS
  animation-name: fadeInDown;
  animation-duration: 1s;
  [...]

您无需在类中指定 opacity: 1;，@keyframes 动画将负责将每个 <div> 设置为完全不透明的动画。

【讨论】：