Angular Animation 动画

最新推荐文章于 2024-03-19 16:29:29 发布

power0405hf

最新推荐文章于 2024-03-19 16:29:29 发布

阅读量1.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/power0405hf/article/details/79413900

版权

本文深入探讨Angular的动画机制，包括从一个状态平滑过渡到另一个状态的实现，详细讲解了State、Transition和Animate函数的用法。通过实例展示了项目卡片和任务的动画效果，同时提到了HostBinding和HostListening在动画中的应用。文章还触及了路由动画，并介绍了如何使用Group和Query & Stagger来协调复杂的动画序列，强调内容和动画的平衡，以及如何创建优雅的用户体验。

摘要由CSDN通过智能技术生成

动画：
从一个状态过度到另一个状态
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(