Angular Animation 动画

动画：
从一个状态过度到另一个状态
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,style,animate } from "@angular/animations";
animations:[
    trigger('square','transform':'translateY(-100%)'
        })),'height':'50px','transform':'translateY(100%)'
          })),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：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!