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

问题描述

我订阅了 Firebase 实时数据库，因此当我向它提交内容时，它会立即在视图中呈现，无需任何 jQuery 或 ajax.

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

我知道如何做前者:

@keyframes 绿色渐变{0% {背景:rgb(173, 235, 173);}100% {背景:无；}}.post-div {动画:绿色淡入淡出 5 秒缓入 1；}

当然，这个动画会在这个类的任何时候渲染，包括加载时发生.

我对Angular 2 方式"感兴趣.

解决方案

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

模板:`<div [@preventInitialChildAnimations]><div [@someAnimation]>...</div>

`，动画:[触发器('防止InitialChildAnimations'，[过渡(':输入'，[查询(':输入'，[]，{可选:真})])]),...]

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.

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 know how to do the former:

@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.

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

解决方案

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屋！