新渲染元素的动画,但不是页面加载

Question

我订阅了Firebase实时数据库,这样当我向它提交内容时,它会立即在视图中呈现,而不需要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 way"感兴趣.

Answer 1

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

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

Answer 2

最简单的解决方案：

 @Component({
    selector: 'myComponent',
    template: '<div [@.disabled]="disableAnimations" [@someAnimation]="someValue">',
    animations: [trigger('someAnimation', [transition('* => *', [style({ transform: 'scale(1.1)' }), animate(250)])])]
})
export class MyComponent implements AfterViewInit {

    disableAnimations: boolean = true;

    constructor() {}

    ngAfterViewInit(): void {
        this.disableAnimations = false;
    }
}

参考： https: //angular.io/api/animations/trigger （滚动到“禁用动画”）