Angularルーティングアニメーションと高度なアニメーション機能の詳細な説明

1. ルーティングアニメーション

ルートアニメーションでは、ホストメタデータでトリガーを指定する必要があります。アニメーションが多すぎると逆効果になるので注意してください。

コンテンツが最優先され、ユーザーが特定のコンテンツに注意を払うように誘導します。アニメーションは単なる補足です。

router.animate.ts でエントリアニメーションと終了アニメーションを定義します。

入場アニメーションと退場アニメーションは頻繁に使用されるため、:enter と :leave というエイリアスがあります。

'@angular/animations' から {trigger、state、transition、style、animate } をインポートします。

エクスポートconst slideToRight = trigger('routeAnim',[
    状態('void'、スタイル({'位置':'固定'、'幅':'100%'、'高さ':'100%'}))、
    状態('*'、スタイル({'位置':'固定'、'幅':'100%'、'高さ':'80%'}))、
    遷移('void => *',[
        スタイル({transform:'translateX(-100%)'}),
        アニメーション('.5s イーズインアウト'、スタイル({transform:'translateX(0)'}))
    ]）、
    遷移('* => void',[
        スタイル({transform:'translateX(0)'}),
        アニメーション('.5s イーズインアウト'、スタイル({transform:'translateX(100%)'}))
    ]）、
]);

プロジェクトリストでルートアニメーションを使用します。

"@angular/core" から { Component、OnInit、HostBinding} をインポートします。
"@angular/material" から MatDialog をインポートします。
「../new-project/new-project.component」から NewProjectComponent をインポートします。
'../invite/invite.component' から InviteComponent をインポートします。
'../../shared/confirm-dialog/confirm-dialog.component' から ConfirmDialogComponent をインポートします。
'../../animate/router.animate' から {slideToRight} をインポートします。

@成分（{
  セレクター: "app-project-list",
  テンプレート URL: "./project-list.component.html",
  スタイル URL: ["./project-list.component.scss"],
  アニメーション:
    右にスライド
  ]
})
エクスポートクラス ProjectListComponent は OnInit を実装します {
  @HostBinding('@routeAnim') 状態;

  プロジェクト = [
    {
      名前:「エンタープライズコラボレーションプラットフォーム」
      説明: 「これは社内プロジェクトです」
      カバー画像: "assets/images/covers/0.jpg"
    },
    {
      名前:「自動テストプロジェクト」
      説明: 「これは社内プロジェクトです」
      カバー画像: "assets/images/covers/2.jpg"
    }
  ];
  コンストラクター(プライベートダイアログ: MatDialog) { }

  ngOnInit() { }

  新しいプロジェクトダイアログを開く() {
    // this.dialog.open(NewProjectComponent,{data:'これはダイアログです'});
    const dialogRef = this.dialog.open(NewProjectComponent, {
      データ: { タイトル: '新しいプロジェクト' }
    });
    dialogRef.afterClosed().subscribe((結果) => {
      console.log(結果);
    });
  }

  起動招待ダイアログ() {
    ダイアログの参照を this.dialog.open(InviteComponent);
  }

  起動更新ダイアログ() {
    const dialogRef = this.dialog.open(NewProjectComponent, {
      データ: { タイトル: 'プロジェクトの編集' }
    });
  }

  確認ダイアログを起動します（）{
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: { title: 'アイテムを編集', content: 'このアイテムを削除してもよろしいですか? '}
    });
  }
}

タスクホームでルートアニメーションを使用します。

"@angular/core" から { Component、OnInit、HostBinding} をインポートします。
「../new-task/new-task.component」から NewTaskComponent をインポートします。
"@angular/material" から MatDialog をインポートします。
「../copy-task/copy-task.component」から CopyTaskComponent をインポートします。
「../../shared/confirm-dialog/confirm-dialog.component」から ConfirmDialogComponent をインポートします。
「../new-task-list/new-task-list.component」から NewTaskListComponent をインポートします。
'../../animate/router.animate' から {slideToRight} をインポートします。

@成分（{
  セレクタ: "app-task-home",
  テンプレート URL: "./task-home.component.html",
  スタイル URL: ["./task-home.component.scss"],
  アニメーション:
    右にスライド
  ]
})
エクスポートクラスTaskHomeComponentはOnInitを実装します{
  コンストラクター(プライベートダイアログ: MatDialog) {}

  @HostBinding('@routeAnim') 状態;
  ngOnInit() {}

  新しいタスクダイアログを起動します() {
    // this.dialog.open(NewTaskComponent);
    const dialogRef = this.dialog.open(NewTaskComponent, {
      データ: { タイトル: "新しいタスク" }
    });
  }
  コピータスクダイアログを起動します() {
    const dialogRef = this.dialog.open(CopyTaskComponent, {
      データ: { リスト: this.lists }
    });
  }

  タスクの更新ダイアログを起動します。
    const dialogRef = this.dialog.open(NewTaskComponent, {
      データ: { タイトル: "タスクの変更"、タスク: タスク }
    });
  }

  確認ダイアログを起動します（）{
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: { title: "タスク リストを削除"、content: "このタスク リストを削除してもよろしいですか?" }
    });
  }

  起動編集リストダイアログ() {
    const dialogRef = this.dialog.open(NewTaskListComponent, {
      データ: { title: "リスト名を変更する" }
    });
    dialogRef.afterClosed().subscribe(結果 => console.log(結果));
  }
  起動NewListDialog() {
    const dialogRef = this.dialog.open(NewTaskListComponent, {
      データ: { title: "新しいリスト名" }
    });
    dialogRef.afterClosed().subscribe(結果 => console.log(結果));
  }
  リスト = [
    {
      id: 1,
      名前:「ToDo」、
      タスク:
        {
          id: 1,
          説明: 「タスク 1: スターバックスに行ってコーヒーを買う」
          完了: true、
          優先度: 3,
          所有者：
            id: 1,
            名前:「張三」
            アバター: "avatars:svg-11"
          },
          期日: 新しい日付()、
          リマインダー: 新しい日付()
        },
        {
          id: 2,
          説明: 「タスク 1: 上司から割り当てられた PPT 課題を完了する」
          完了: 偽、
          優先度: 2,
          所有者：
            id: 2,
            名前:「李思」
            アバター: "avatars:svg-12"
          },
          dueDate: 新しい日付()
        }
      ]
    },
    {
      id: 2,
      名前:「進行中」、
      タスク:
        {
          id: 1,
          説明: 「タスク 3: プロジェクト コード レビュー」、
          完了: 偽、
          優先度: 1、
          所有者：
            id: 1,
            名前: 「王武」、
            アバター: "avatars:svg-13"
          },
          dueDate: 新しい日付()
        },
        {
          id: 2,
          説明: 「タスク 1: プロジェクト計画を作成する」
          完了: 偽、
          優先度: 2,
          所有者：
            id: 2,
            名前:「李思」
            アバター: "avatars:svg-12"
          },
          dueDate: 新しい日付()
        }
      ]
    }
  ];
}

ルートの定義

<mat-list-item [routerLink]="['/project']"> 
    <mat-icon mat-list-icon svgIcon="プロジェクト"></mat-icon>
    <h4 mat-line>プロジェクトホーム</h4>
    <p mat-line mat-subheader> すべてのプロジェクトを表示</p>
  </mat-list-item>
  <mat-list-item [routerLink]="['/task']"> 
    <mat-icon mat-list-icon svgIcon="プロジェクト"></mat-icon>
    <h4 mat-line>タスクホームページ</h4>
    <p mat-line mat-subheader> すべてのプロジェクトを表示</p>
  </mat-list-item>

注意: 必ず HostBinding 形式を使用してください。

2. グループ

複数の変換を同時にアニメーション化するために使用されます

group([animate(...),animate(...)...]) は、複数のアニメーションが記述された配列を受け取ります。

'@angular/animations' から {trigger、state、transition、style、animate、group } をインポートします。

エクスポートconst slideToRight = trigger('routeAnim',[
    状態('void'、スタイル({'位置':'固定'、'幅':'100%'、'高さ':'80%'}))、
    状態('*'、スタイル({'位置':'固定'、'幅':'100%'、'高さ':'80%'}))、
    遷移(':enter',[
        スタイル({transform:'translateX(-100%)',不透明度:'0'}),
        グループ（[
            アニメーション('.5s イーズインアウト'、スタイル({transform:'translateX(0)'}))、
            アニメーション('.3s イーズイン'、スタイル({不透明度:1}))
        ])
    ]）、
    遷移(':leave',[
        スタイル({transform:'translateX(0)',不透明度:'1'}),
        グループ（[
            アニメーション('.5s イーズインアウト'、スタイル({transform:'translateX(100%)'}))、
            アニメーション('.3s イーズイン'、スタイル({不透明度:0}))
        ])
    ]）、
]);

クエリとスタガー

クエリは、親ノードが子ノードを見つけて、選択した要素にアニメーションを適用するために使用されます。非常に強力です。

Stagger は、クエリを満たす要素が複数あり、各アニメーションの間に間隔があることを指定します。

例を見てみましょう。新しいプロジェクトを作成するときに、同時に 2 つの新しいプロジェクトを作成します。2 つの新しいプロジェクトのアニメーションは順番に生成され、最初のアニメーションが完了すると 2 番目のアニメーションが開始されます。

list.animate.ts を作成する

最初にエントリアニメーションを非表示にし、スタッガを使用して 1000 秒間隔で 1 秒のアニメーションを作成します。

'@angular/animations' から {trigger、state、transition、style、animate、query、animation、stagger} をインポートします。

エクスポートconst listAnimation = trigger('listAnim', [
    遷移('* => *', [
      query(':enter', style({opacity: 0}), {optional: true }), //optionalをtrueに追加すると、次の状態のアニメーションはオプションになります query(':enter', stagger(1000, [
        アニメーション('1s'、スタイル({不透明度: 1}))
      ]), { オプション: true }),
      クエリ(':leave'、スタイル({不透明度: 1})、{オプション: true })、
      クエリ(':leave', stagger(1000, [
        アニメーション('1s'、スタイル({不透明度: 0}))
      ]）、{ オプション: true })
    ])
  ]);

project_list で使用する

クエリアニメーションは通常 *ngFor と一緒に適用され、外側に div レイヤーが必要になります。

<div class="container" [@listAnim]="プロジェクトの長さ">
  <app-project-item *ngFor="let project of projects" [item]="project"
  クラス="カード"
  (onInvite)="lauchInviteDialog()"
  (onEdit)="UpdateDialog() を起動する"
  (onDelete)="lauchConfimDialog(プロジェクト)">
  </アプリプロジェクトアイテム>
</div>
<button class="ab-buttonmad-fab fab-button" mat-fab type="button" (click)="openNewProjectDialog()">
  <mat-icon>追加</mat-icon>
</ボタン>

対応するCSSを変更する

// ：ホスト{
// 表示: flex;
// flex-direction: row;
// flex-wrap: wrap;
// }

//ホストをdivに変更
。容器{
    ディスプレイ: フレックス;
    flex-direction: 行;
    flex-wrap: ラップ;
}

コンポーネントを変更する

"@angular/core" から { Component、OnInit、HostBinding} をインポートします。
"@angular/material" から MatDialog をインポートします。
「../new-project/new-project.component」から NewProjectComponent をインポートします。
'../invite/invite.component' から InviteComponent をインポートします。
'../../shared/confirm-dialog/confirm-dialog.component' から ConfirmDialogComponent をインポートします。
'../../animate/router.animate' から {slideToRight} をインポートします。
'../../animate/list.animate' から listAnimation をインポートします。
'@angular/core/src/render3' から { projection } をインポートします。

@成分（{
  セレクター: "app-project-list",
  テンプレート URL: "./project-list.component.html",
  スタイル URL: ["./project-list.component.scss"],
  アニメーション:
    slideToRight,listAnimation //最初のステップはlistAnimationをインポートすることです
  ]
})
エクスポートクラス ProjectListComponent は OnInit を実装します {
  @HostBinding('@routeAnim') 状態;

  //2番目のステップは配列を変換してIDを追加することです
  プロジェクト = [
    {
      id:1,
      名前:「エンタープライズコラボレーションプラットフォーム」
      説明: 「これは社内プロジェクトです」
      カバー画像: "assets/images/covers/0.jpg"
    },
    {
      id:2,
      名前:「自動テストプロジェクト」
      説明: 「これは社内プロジェクトです」
      カバー画像: "assets/images/covers/2.jpg"
    }
  ];
  コンストラクター(プライベートダイアログ: MatDialog) { }

  ngOnInit() { }

  //ステップ3、新しい要素を追加するときにopenNewProjectDialog()をハードコードする{
    // this.dialog.open(NewProjectComponent,{data:'これはダイアログです'});
    const dialogRef = this.dialog.open(NewProjectComponent, {
      データ: { タイトル: '新しいプロジェクト' }
    });
    dialogRef.afterClosed().subscribe((結果) => {
      console.log(結果);
      this.projects = [...this.projects, 
        {id:3,name:'新しいプロジェクト',desc:'これは新しいプロジェクトです',coverImg:"assets/images/covers/3.jpg"},
        {id:4,name:'もう一つの新しいプロジェクト',desc:'これはもう一つの新しいプロジェクトです',coverImg:"assets/images/covers/4.jpg"}]
    });
  }

  起動招待ダイアログ() {
    ダイアログの参照を this.dialog.open(InviteComponent);
  }

  起動更新ダイアログ() {
    const dialogRef = this.dialog.open(NewProjectComponent, {
      データ: { タイトル: 'プロジェクトの編集' }
    });
  }

  //ステップ4: プロジェクトを変更して削除する lauchConfimDialog(project) {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: { title: 'アイテムを削除', content: 'このアイテムを削除してもよろしいですか? '}
    });
    dialogRef.afterClosed().subscribe(結果=>{
      console.log(結果);
      this.projects=this.projects.filter(p=>p.id!=project.id);
    });
  }
}

Stagger を使用すると、複数の要素がある場合に、アニメーションが一度にではなく交互に実行されるようになります。

以上がAngularルーティングアニメーションと高度なアニメーション機能の詳細な説明です。Angularルーティングアニメーションと高度なアニメーション機能の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません: