<mat-list-item [routerLink]="['/project']"> <mat-icon mat-list-icon svgIcon="projects"></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="projects"></mat-icon> <h4 mat-line>任务首页</h4> <p mat-line mat-subheader> 查看您的所有项目</p> </mat-list-item>
注意：一定要用HostBinding形式。
二、Group用于同时进行一组动画变换
group([animate(...),animate(...)...])接收一个数组，数组里写多个动画。
import { trigger, state, transition, style, animate, group} from '@angular/animations'; export const slideToRight = trigger('routeAnim',[ state('void',style({'position':'fixed','width':'100%','height':'80%'})), state('*',style({'position':'fixed','width':'100%','height':'80%'})), transition(':enter',[ style({transform:'translateX(-100%)',opacity:'0'}), group([ animate('.5s ease-in-out', style({transform:'translateX(0)'})), animate('.3s ease-in', style({opacity:1})) ]) ]), transition(':leave',[ style({transform:'translateX(0)',opacity:'1'}), group([ animate('.5s ease-in-out', style({transform:'translateX(100%)'})), animate('.3s ease-in', style({opacity:0})) ]) ]), ]);
三、Query & StaggerQuery用于父节点寻找子节点，把动画应用到选中元素。非常强大。
Stagger指定有多个满足Query的元素，每个的动画之间有间隔。
做一个示例：新建的时候同时新建2个项目，两个新建出的项目的动画依次产生，第一个完成后才开始第二个。
建立list.animate.ts
进场动画，先隐藏起来，通过stagger间隔1000s做一个1s的动画。
import { trigger, state, transition, style, animate, query, animation,stagger} from '@angular/animations'; export const listAnimation = trigger('listAnim', [ transition('* => *', [ query(':enter', style({opacity: 0}), { optional: true }), //加入optional为true,后面的状态动画都是可选的 query(':enter', stagger(1000, [ animate('1s', style({opacity: 1})) ]), { optional: true }), query(':leave', style({opacity: 1}), { optional: true }), query(':leave', stagger(1000, [ animate('1s', style({opacity: 0})) ]), { optional: true }) ]) ]);
在project_list中使用
应用query动画一般都是跟*ngFor在一起的，需要外面套一层div。
<div [@listAnim]="projects.length"> <app-project-item *ngFor="let project of projects" [item]="project" (onInvite)="lauchInviteDialog()" (onEdit)="lauchUpdateDialog()" (onDelete)="lauchConfimDialog(project)"> </app-project-item> </div> <button mat-fab type="button" (click)="openNewProjectDialog()"> <mat-icon>add</mat-icon> </button>
修改对应的css
// :host{ // display: flex; // flex-direction: row; // flex-wrap: wrap; // } //把host改为div .container{ display: flex; flex-direction: row; flex-wrap: wrap; }
修改一下component
import { Component, OnInit , HostBinding } from "@angular/core"; import { MatDialog } from "@angular/material"; import { NewProjectComponent } from "../new-project/new-project.component"; import { InviteComponent } from '../invite/invite.component'; import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component'; import {slideToRight} from '../../animate/router.animate' import { listAnimation } from '../../animate/list.animate'; import { projection } from '@angular/core/src/render3'; @Component({ selector: "app-project-list", templateUrl: "./project-list.component.html", styleUrls: ["./project-list.component.scss"], animations:[ slideToRight,listAnimation //第一步，导入listAnimation ] }) export class ProjectListComponent implements OnInit { @HostBinding('@routeAnim') state; //第二步，改造一下数组，加id projects = [ { id:1, name: "企业协作平台", desc: "这是一个企业内部项目", coverImg: "assets/images/covers/0.jpg" }, { id:2, name: "自动化测试项目", desc: "这是一个企业内部项目", coverImg: "assets/images/covers/2.jpg" } ]; constructor(private dialog: MatDialog) { } ngOnInit() { } //第三步，新增元素时hard code一下 openNewProjectDialog() { // this.dialog.open(NewProjectComponent,{data:'this is a dialog'}); const dialogRef = this.dialog.open(NewProjectComponent, { data: { title: '新建项目' } }); dialogRef.afterClosed().subscribe((result) => { console.log(result); this.projects = [...this.projects, {id:3,name:'一个新项目',desc:'这是一个新项目',coverImg:"assets/images/covers/3.jpg"}, {id:4,name:'又一个新项目',desc:'这是又一个新项目',coverImg:"assets/images/covers/4.jpg"}] }); } lauchInviteDialog() { const dialogRef = this.dialog.open(InviteComponent); } lauchUpdateDialog() { const dialogRef = this.dialog.open(NewProjectComponent, { data: { title: '编辑项目' } }); } //第四步，改造一下删除项目 lauchConfimDialog(project) { const dialogRef = this.dialog.open(ConfirmDialogComponent, { data: { title: '删除项目', content: '您确认删除该项目吗？' } }); dialogRef.afterClosed().subscribe(result=>{ console.log(result); this.projects=this.projects.filter(p=>p.id!=project.id); }); } }
Stagger使得在多个元素时候，动画交错开，而不是一起。
以上就是详解Angular路由动画及高阶动画函数的详细内容，更多关于Angular路由动画及高阶动画函数的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章: