Skip to content

16 Animation

16.1 State

16.1.1 What is state

状态表示的是要进行运动的元素在运动的不同时期所呈现的样式。

Screenshot 2025-02-11 at 15.27.43

16.1.2 状态的种类

在 Angular 中,有三种类型的状态,分别为:void*custom

Screenshot 2025-02-11 at 15.28.31

void:当元素在内存中创建好但尚未被添加到 DOM 中或将元素从 DOM 中删除时会发生此状态

*:元素被插入到 DOM 树之后的状态,或者是已经在DOM树中的元素的状态,也叫默认状态

custom:自定义状态,元素默认就在页面之中,从一个状态运动到另一个状态,比如面板的折叠和展开。

16.1.3 进出场动画

进场动画是指元素被创建后以动画的形式出现在用户面前,进场动画的状态用 void => * 表示,别名为:enter

Screenshot 2025-02-11 at 15.30.47

出场动画是指元素在被删除前执行的一段告别动画,出场动画的状态用 * => void,别名为:leave

Screenshot 2025-02-11 at 15.31.00

16.2 快速上手

16.3 关键帧动画

16.4 动画回调

16.5 创建可重用动画

16.6 查询元素执行动画

16.7 交错动画

16.8 自定义状态动画

16.9 路由动画