如何使用 Angular 原生动画

如何使用 Angular 原生动画

现代网络正在朝着高度直观的界面和丰富的图形内容发展，以使用户牢牢地盯着他们的设备。在制作与众不同的 Web 应用程序时，动画会派上用场。

作为前端开发领域的关键参与者，Angular 提供了 Web 动画支持。以下是在 Angular 应用程序中包含动画的所有知识！

入门

Angular 动画构建在原生之上 网络动画 API ，使其更容易在 Android 和 iOS 平台上运行。简而言之，作为开发人员，我们不会仅仅依赖于 Web 浏览器的实现。

在动画中，动画生命周期的每个阶段都有不同的状态。这个概念对于 Angular 动画也很常见。

您应该熟悉这三种状态以及在使用由 Angular 提供支持的动画时它们是如何定义的：

• 自定义状态： 我们可以为特定状态提供自定义名称，并在实现动画时使用该名称。
• 通配符状态： 这是元素的常见状态。它也被称为默认状态。
• 无效状态： 元素不属于 DOM 的状态。这是元素尚未渲染或已离开视图的状态。

实践中的角度动画

要开始我们的 Angular 动画之旅，请添加 浏览器动画模块 作为对 app.module.ts 文件。

 从'@angular/platform-b​​rowser/animations'导入{ BrowserAnimationsModule }；  
  
 @NgModule({  
 进口：[BrowserAnimationsModule]  
 })

现在，通过从 @角/动画 .一些常用的动画功能是 触发器、状态、样式、动画和过渡 .

 从'@angular/animations'导入{触发器、状态、样式、动画、过渡}；

接下来，在 动画： 内的元数据属性 @零件（） 组件的装饰器。

 @零件（{  
 选择器：'应用程序动画测试'，  
 templateUrl: './animation-test.component.html',  
 styleUrls: ['./animation-test.component.css'],  
 动画：[  
 //动画实现  
 ]  
 })

动画待办事项列表

现在我们已经设置了具有所有先决条件的环境，是时候看看 Angular 动画的实际效果了。让我们开发以下动画待办事项列表。

在这个简单的项目中，待办事项会在 添加 按钮被单击并在单击时滑出 删除 按钮。下面的简单代码块负责这个动画效果。

 动画：[  
 触发器（'添加项目'，[  
 状态（'无效'，风格（{  
 变换：'translateX(-100%)'  
 })),  
 transition('void <=> *', animate('0.5s ease-in'))  
 ]),  
 ]

在使用 Angular 进行动画制作时，有许多辅助方法是必不可少的，所以让我们来看看它们的用法。

角度动画辅助方法

扳机（）

单个动画的整体实现在 扳机（） 方法。触发器应该有一个可以从 DOM 中引用的名称。在上面的例子中，我们定义了一个名为 添加项目 , 它将被附加到 DOM 元素上，如下所示。

 <div @addItem></div>

状态（）

方法 状态（） 定义应在动画结束时实现的不同状态。状态可以是以下三种状态中的任何一种： 自定义、通配符 (*)、 或者 空白 .在 - 的里面 状态（） 方法，定义与每个状态关联的样式。

 state('start', style({ backgroundColor: 'yellow' })),

在这个片段中，我们定义了一个名为 开始 并在达到该状态时应用黄色背景色。

风格（）

我们可以在其他方法中使用此方法，例如 状态（） 和 过渡（） 应用不同的样式。这 风格（） 方法将采用 CSS 属性的对象。

 样式（{背景颜色：'黄色'，不透明度：0}）

过渡（）

这 过渡（） 方法定义从一种状态到另一种状态的转换。这个方法的第一个参数定义了状态应该如何改变。例如， *** = > 无效** 指的是从 DOM 中删除元素的场景。相似地， ** <=>** 表示动画可以双向应用。

以下是状态变化表达式的一些示例：

• **无效 = > *** : 元素从 void 状态变为任何其他状态。
• 初始 = > 最终 ：状态从初始变为最终。
• **无效 <=> *** : 状态从 void 变为通配符状态，反之亦然。

第二个参数使用 动画（） 方法。

动画（）

这 动画（） 方法接受时间属性，如 持续时间，延迟， 和 缓和 .此方法对于完成动画至关重要。的语法 动画（） 方法如下所示。

 动画（'持续时间延迟缓动'）

现在我们对动画助手的工作方式有了更好的了解，让我们继续完成待办事项列表动画。但首先，添加以下 TypeScript 代码来完成按钮的功能。

 项目= [  
 '上学'，  
 '购买杂货'，  
 '锻炼 1 小时'  
 ];  
  
 项目列表：字符串[] = []；  
 计数 = 0;  
  
 添加项目（） {  
 if (this.items.length > this.count) {  
 this.itemList.push(this.items[this.count]);  
 this.count++;  
 }  
 }  
  
 除去项目（） {  
 如果（this.count > 0）{  
 this.itemList.pop();  
 this.count--;  
 }  
 }

然后，使用以下 HTML 块设计模板。请记住为样式添加 Bootstrap。

 <div class="container pt-5">  
 <h1>待办事项清单</h1>  
 <button (click)="addItem()" class="btn btn-success">添加</button>  
 <button (click)="removeItem()" class="btn btn-danger">删除</button>  
 <div class="card" *ngFor="let list of itemList" @addItem>{{列表}}</div>  
 </div>

替代方法

除了上述实现之外，我们还可以使用几种方法来实现相同的结果。让我们尝试一些替代方法来实现相同的动画，以便更熟悉 Angular 动画。

使用过渡

我们可以避免使用 状态（） 方法并使用 过渡（） 方法。在下面的代码示例中，我们使用了两个 过渡（） 方法和定义 风格 过渡前后。

 动画：[  
 触发器（'添加项目'，[  
 过渡（'无效=> *'，[  
 风格（{变换：'translateX（-100％）'}），  
 动画（'0.5s 缓入'）  
 ]),  
 过渡（'* => 无效'，[  
 animate('0.5s ease-in', style({ transform: 'translateX(-100%)' }))  
 ])  
 ]),  
 ]

使用别名

自从 空白 => ***** 和 ***** => 空白 是常见的场景，Angular 提供 ：进入 和 ：离开 别名来处理元素进入和离开 DOM 的动画。请参考以下代码示例。

 动画：[  
 触发器（'添加项目'，[  
 过渡（'：进入'，[  
 风格（{变换：'translateX（-100％）'}），  
 动画（'0.5s 缓入'）  
 ]),  
 过渡（'：离开'，[  
 animate('0.5s ease-in', style({ transform: 'translateX(-100%)' }))  
 ])  
 ]),  
 ]

使用自定义状态

我们也可以使用自定义状态来实现相同的结果。让我们介绍一个名为 最初的 而不是通配符状态。

 动画：[  
 触发器（'添加项目'，[  
 状态（'无效'，风格（{  
 变换：'translateX(-100%)'  
 })),  
 transition('void <=> initial', animate('0.5s ease-in'))  
 ]),  
 ]

使用自定义状态时，我们应该将它们绑定到元素。为此，首先在组件内声明一个变量。

 初始状态 = '初始';

然后，将状态绑定到模板，如下所示。

 <div [@addItem]=initialState></div>

结论

动画通过提供交互式界面来创造更好的用户体验。 Angular 为您提供了一个强大的工具来开发有吸引力的动画。

尝试我们在本文中讨论的待办事项列表应用程序动画，以及获得 Angular 动画实践经验的替代方法。有关更多信息，您可以随时参考 Angular 文件 .

感谢您的阅读！

同步融合的 Angular UI 组件 library 是您构建应用程序所需的唯一套件。它在一个包中包含超过 65 个高性能、轻量级、模块化和响应式 UI 组件。

对于现有客户，最新的 Essential Studio 版本可从 许可和下载 页。如果您还不是 Syncfusion 客户，您可以试试我们的 30 天 免费试用 查看可用的功能。另外，请查看我们的演示 GitHub .

如果您有任何问题，您可以通过我们的联系我们 支持论坛 , 支持门户 ， 或者 反馈门户 .我们随时乐意为您提供帮助！

相关博客

• 在 Angular 中构建自定义结构和属性指令
• 角度模板驱动与。反应形式
• 使用 Canactivate 在 Angular 中实现路由保护
• Blazor VS。角

最初发表于 https://www.syncfusion.com 2022 年 9 月 29 日。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/39904/33213009