動畫容器

Question

我正在開發一個更大的應用程序，在這里我們使用模塊的延遲加載。 加載模塊后，在某些情況下，組件會呈現為<ng-container><ng-container> 。 問題是，容器上定義的動畫沒有被調用。

我創建了一個虛擬的stackblitz示例來演示我的意思： 鏈接

app.component.html：

<ng-container *ngIf="visible" [@myAnimation]>
    <hello [ngStyle]="{'top': '50px'}" name="not animated"></hello>
</ng-container>

<hello name="animated" [ngStyle]="{'top': '100px'}" *ngIf="visible" [@myAnimation]></hello>

<button (click)="toggle()">Toggle visibility</button>

app.component.ts：

import { Component } from '@angular/core';
import {animate, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger("myAnimation", [
            transition(":enter", [
                style({opacity: 0 }),
                animate(
                    "800ms",
                    style({
                        opacity: 1
                    })
                ),
            ]),
            transition(":leave", [
                style({opacity: 1 }),
                animate(
                    "800ms",
                    style({
                        opacity: 0
                    })
                ),
            ]),
        ]),
  ]
})
export class AppComponent  {
  name = 'Angular';
  visible = false;

  toggle() {
    this.visible = !this.visible;
  }
}

hello.component.ts：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
}

Answer 1

您應該在hello組件中輸入[@myAnimation] ，否則將無法從ng-container獲取hello組件的動畫。

<ng-container *ngIf="visible">
    <hello [ngStyle]="{'top': '50px'}" name="not animated" [@myAnimation]></hello>
</ng-container>

說明：來自Angular大學

ng-container指令為我們提供了一個元素，我們可以將結構化指令附加到頁面的某個部分，而不必為此專門創建額外的元素。

我們不能使用它賦予任何屬性或添加類，它用於附加結構指令。 它記錄在Angular中

Angular是一個分組元素，不會干擾樣式或布局，因為Angular不會將其放在DOM中。

實時示例： stackblitz