动画：
从一个状态过度到另一个状态
State:定义状态
Transition:定义如何过渡
Animate函数：规定具体如何过渡，如时间，过渡的速度等
animate有多个重载形式

app.module.ts:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';app.component.ts:
port { trigger, state, transition,style } from "@angular/animations";animations:[trigger('square', [state('green',style({'background-color':'green','height':'100px',// 'transform':translate})),state('red',style({'background-color':'red','height':'50px'})),transition('green => red',animate(1000))])
]  animate有3个参数：第一个 持续时间 第二个：延迟时间，第三个，缓动函数，
如animate('0.2s 1s')
animate('0.2s cubic-bezier()')
关键帧：物体运动或变化过程中的关键动作所处的那一帧import { trigger, state, transition,style,animate } from "@angular/animations";
animations:[trigger('square', [state('green',style({'background-color':'green','height':'100px','transform':'translateY(-100%)'})),state('red',style({'background-color':'red','height':'50px','transform':'translateY(100%)'})),transition('green => red',animate(1000)),transition('red => green',animate('.8s cubic-bezier(.11,.67,1,.58)'))]) 
]  
})
export class AppComponent {squareState:String;darkTheme = false;constructor(private oc:OverlayContainer){}switchTheme(dark){this.darkTheme = dark;} onClick(){this.squareState = this.squareState === 'red' ? 'green':'red';}
}html:<div class="square" [@square]="squareState" (click)="onClick()"></div>

项目卡片和任务动画
localhost://4200/tasklists 把鼠标移到任务任务list上没有变化：widePriority拼错了

HostBinding:可以理解为 html中属性绑定到组件中的成员变量
HostListening：绑定到组件中的事件

3.4 路由动画及高阶动画函数
路由动画需要在host元数据中指定触发器
动画不要过多，内容优先，动画辅助。
Group:用于同时进行一组的动画变换
Query & Stagger：
Query用于父节点寻找子节点
ease-in-out: 开始和结束都缓慢，中间加速
做挂了…

group可以让一组动画同时执行

Uncaught (in promise): Error: The animation trigger "routeAnim" has failed to build due to the following errors:- The CSS property "opacity" that exists between the times of "0ms" and "500ms" is also being animated in a parallel animation between the times of "0ms" and "300ms"
Error: The animation trigger "routeAnim" has failed to build due to the following errors:- The CSS property "opacity" that exists between the times of "0ms" and "500ms" is also being animated in a parallel animation between the times of "0ms" and "300ms"- --->没搞定

query：