路由动画需要在host元数据中指定触发器。动画注意不要过多，否则适得其反。
内容优先，引导用户去注意到某个内容。动画只是辅助手段。
在router.animate.ts中定义一个进场动画，一个离场动画。
因为进场动画和离场动画用的特别频繁，有一个别名叫:enter和:leave。
import { trigger, state, transition, style, animate} from '@angular/animations'; export const slideToRight = trigger('routeAnim',[ state('void',style({'position':'fixed','width':'100%','height':'100%'})), state('*',style({'position':'fixed','width':'100%','height':'80%'})), transition('void => *',[ style({transform:'translateX(-100%)'}), animate('.5s ease-in-out', style({transform:'translateX(0)'})) ]), transition('* => void',[ style({transform:'translateX(0)'}), animate('.5s ease-in-out', style({transform:'translateX(100%)'})) ]), ]);
在project-list中使用路由动画。
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' @Component({ selector: "app-project-list", templateUrl: "./project-list.component.html", styleUrls: ["./project-list.component.scss"], animations:[ slideToRight ] }) export class ProjectListComponent implements OnInit { @HostBinding('@routeAnim') state; projects = [ { name: "企业协作平台", desc: "这是一个企业内部项目", coverImg: "assets/images/covers/0.jpg" }, { name: "自动化测试项目", desc: "这是一个企业内部项目", coverImg: "assets/images/covers/2.jpg" } ]; constructor(private dialog: MatDialog) { } ngOnInit() { } 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); }); } lauchInviteDialog() { const dialogRef = this.dialog.open(InviteComponent); } lauchUpdateDialog() { const dialogRef = this.dialog.open(NewProjectComponent, { data: { title: '编辑项目' } }); } lauchConfimDialog() { const dialogRef = this.dialog.open(ConfirmDialogComponent, { data: { title: '编辑项目', content: '您确认删除该项目吗？' } }); } }
在task-home中使用路由动画。
import { Component, OnInit , HostBinding } from "@angular/core"; import { NewTaskComponent } from "../new-task/new-task.component"; import { MatDialog } from "@angular/material"; import { CopyTaskComponent } from "../copy-task/copy-task.component"; import { ConfirmDialogComponent } from "../../shared/confirm-dialog/confirm-dialog.component"; import { NewTaskListComponent } from "../new-task-list/new-task-list.component"; import {slideToRight} from '../../animate/router.animate'; @Component({ selector: "app-task-home", templateUrl: "./task-home.component.html", styleUrls: ["./task-home.component.scss"], animations:[ slideToRight ] }) export class TaskHomeComponent implements OnInit { constructor(private dialog: MatDialog) {} @HostBinding('@routeAnim') state; ngOnInit() {} launchNewTaskDialog() { // this.dialog.open(NewTaskComponent); const dialogRef = this.dialog.open(NewTaskComponent, { data: { title: "新建任务" } }); } lauchCopyTaskDialog() { const dialogRef = this.dialog.open(CopyTaskComponent, { data: { lists: this.lists } }); } launchUpdateTaskDialog(task) { const dialogRef = this.dialog.open(NewTaskComponent, { data: { title: "修改任务", task: task } }); } launchConfirmDialog() { const dialogRef = this.dialog.open(ConfirmDialogComponent, { data: { title: "删除任务列表", content: "您确定要删除该任务列表吗？" } }); } launchEditListDialog() { const dialogRef = this.dialog.open(NewTaskListComponent, { data: { title: "更改列表名称" } }); dialogRef.afterClosed().subscribe(result => console.log(result)); } launchNewListDialog() { const dialogRef = this.dialog.open(NewTaskListComponent, { data: { title: "新建列表名称" } }); dialogRef.afterClosed().subscribe(result => console.log(result)); } lists = [ { id: 1, name: "待办", tasks: [ { id: 1, desc: "任务一： 去星巴克买咖啡", completed: true, priority: 3, owner: { id: 1, name: "张三", avatar: "avatars:svg-11" }, dueDate: new Date(), reminder: new Date() }, { id: 2, desc: "任务一： 完成老板布置的PPT作业", completed: false, priority: 2, owner: { id: 2, name: "李四", avatar: "avatars:svg-12" }, dueDate: new Date() } ] }, { id: 2, name: "进行中", tasks: [ { id: 1, desc: "任务三： 项目代码评审", completed: false, priority: 1, owner: { id: 1, name: "王五", avatar: "avatars:svg-13" }, dueDate: new Date() }, { id: 2, desc: "任务一： 制定项目计划", completed: false, priority: 2, owner: { id: 2, name: "李四", avatar: "avatars:svg-12" }, dueDate: new Date() } ] } ]; }
定义路由