Angular 是一款强大的前端框架，它提供了许多内置的动画效果，但是这些效果有些简单，不够丰富。为了让我们的应用更加生动有趣，我们可以使用第三方动画库 ngx-animations。
什么是 ngx-animations？
ngx-animations 是一个基于 Angular 的动画库，它提供了 80 多种动画效果，包括渐变、旋转、缩放、弹跳、翻转等等。它的安装和使用都非常简单，可以很快地为我们的应用添加动画效果。
如何安装 ngx-animations？
要使用 ngx-animations，我们需要先安装它。我们可以使用 npm 命令来安装：
npm install @angular/animations --save npm install ngx-animations --save
如何使用 ngx-animations？
安装好 ngx-animations 后，我们就可以在我们的 Angular 应用中使用它了。我们需要在 app.module.ts 文件中导入 BrowserAnimationsModule 和 NgxAnimationsModule 模块：
-- -------------------- ---- -------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------------- - ---- -----------------
-----------
-------- -
------------------------
-------------------
--
---
--
------ ----- --------- - -导入模块后，我们就可以在组件中使用动画效果了。我们可以在组件的元数据中添加 animations 属性，来定义动画效果：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------ - ---- ----------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ ----------- -------- -- ------ ----- ------------ - ----- - --------- -
在这个例子中，我们使用了 bounce 动画效果。我们可以在 HTML 模板中使用 trigger 函数来触发这个动画：
<div [@bounce]>Hello World!</div>
这样，我们就可以在应用中看到一个弹跳的文字。
如何自定义动画效果？
ngx-animations 提供了很多内置的动画效果，但是有时候我们需要自定义动画效果。我们可以使用 Angular 的动画 API 来定义自己的动画效果。
-- -------------------- ---- -------
------ - -------- ----------- ------ ------- - ---- ----------------------
------ ----- --------------- - -------------------------- -
-------------------- -
------- -------- - ---
----------- ------------- ------- -------- - ---
---
-------------------- -
------- -------- - ---
----------- ------------- ------- -------- - ---
--
---在这个例子中，我们定义了一个名为 customAnimation 的动画效果。它有两个状态：进入状态和离开状态。在进入状态时，元素的 opacity 属性从 0 变为 1，在离开状态时，元素的 opacity 属性从 1 变为 0。
我们可以在组件的元数据中使用这个动画效果：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------------- - ---- --------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ ----------- ----------------- -- ------ ----- ------------ - ----- - --------- ---- - ----- -
在 HTML 模板中，我们可以使用 ngIf 指令来触发这个动画：
<button (click)="show = !show">Toggle</button> <div *ngIf="show" [@customAnimation]>Hello World!</div>
这样，我们就可以在应用中看到一个自定义的动画效果。
总结
ngx-animations 是一个非常方便的动画库，它提供了许多丰富的动画效果，能够让我们的应用更加生动有趣。在使用 ngx-animations 时，我们需要先安装它，并在应用中导入 BrowserAnimationsModule 和 NgxAnimationsModule 模块。然后我们就可以在组件中使用动画效果了。如果内置的动画效果不够满足我们的需求，我们可以使用 Angular 的动画 API 来定义自己的动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6554ab83d2f5e1655de7c6f6