新渲染元素的动画，但不是页面加载 [英] Animation for newly rendered elements, but not on page load

问题描述

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

I'm subscribed to a Firebase real-time database so that when I submit something to it, it immediately renders in the view without any need for jQuery or ajax.

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

I'd like to animate the rendering of such elements, so that when a new element is added to the DOM its div's background-color is green and slowly fades away. What I don't want is for all divs of this class to perform this animation on load.

I知道如何做前者：

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

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

但是这个动画当然会在任何时候渲染，包括在加载。

But of course this animation happens for this class any time it's rendered, including on load.

我对Angular 2 way感兴趣。

I'm interested in the "Angular 2 way" to do this.

推荐答案

从Angular 4.25开始，有一种更简单的方法：如果你想抑制：在视图初始化时输入动画，只需用下面的动画包装它：

Since Angular 4.25 there's an easier way to do this: If you want to suppress an :enter animation on view initialization, just wrap it with the following animation:

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

这篇关于新渲染元素的动画，但不是页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！