javascript - 新呈现元素的动画，但不在页面加载时

Question

我订阅了一个 Firebase 实时数据库，这样当我向它提交内容时，它会立即呈现在 View 中，而不需要任何 jQuery 或 ajax。

我想为这些元素的渲染设置动画，这样当一个新元素被添加到 DOM 时，它的 div 的 background-color 是绿色的，慢慢消失。我不希望此类的所有 div 在加载时执行此动画。

我知道怎么做前者:

@keyframes green-fade {
    0% {background: rgb(173, 235, 173);}
    100% {background: none;}
}

.post-div {
   animation: green-fade 5s ease-in 1;
}

但是这个动画当然会在这个类的任何时候呈现，包括加载时。

我对执行此操作的“Angular 2 方式”很感兴趣。

Answer 1

从 Angular 4.25 开始，有一种更简单的方法可以做到这一点:如果你想在 View 初始化时抑制 :enter 动画，只需用以下动画包装它:

template: `
  <div [@preventInitialChildAnimations]>
    <div [@someAnimation]>...</div>
  </div>
`,
animations: [
  trigger('preventInitialChildAnimations', [
    transition(':enter', [
      query(':enter', [], {optional: true})
    ])
  ]),
  ...
]