在 Angular 中，动画是前端开发中非常重要的一部分。但是，在开发过程中，我们经常需要在多个组件中使用相同的动画效果，这就需要我们创建可重用的动画。
在本文中，我们将讨论如何在 Angular 中创建可重用的动画，并提供一些示例代码以帮助您更好地理解。
动画的基础知识
在开始讨论如何创建可重用的动画之前，我们需要了解一些动画的基础知识。
在 Angular 中，可以使用 @angular/animations 模块来创建动画。这个模块提供了各种动画功能，包括定义动画的关键帧和缓动函数，以及触发动画的条件。
要使用 @angular/animations 来创建动画，我们需要定义一些元数据。这些元数据描述了动画的行为，例如动画的持续时间、关键帧、缓动函数等。
在定义元数据时，我们可以使用 trigger 函数。这个函数定义了一个动画触发器，可以根据我们指定的条件来触发动画。
例如，以下代码定义了一个简单的动画触发器，名为 fadeIn，它将元素的不透明度从 0 到 1：
------ - -------- ----------- ------ ------- - ---- ----------------------
------ ----- ------ - ----------------- -
-------------------- -
------- -------- - ---
-------------- --------- ------- -------- - ---
--
---在这段代码中，我们使用 trigger 函数定义了一个叫做 fadeIn 的动画触发器。该触发器具有一个叫做 :enter 的状态，当元素进入页面时，该状态就会触发动画。
在 :enter 状态中，我们指定了两个动画帧。第一个关键帧将元素的不透明度设置为 0，第二个关键帧将不透明度设置为 1，并在 500 毫秒内缓慢地淡入该元素。
这是一个非常简单的动画触发器，但它为我们提供了一个好的开始点。
创建可重用的动画
在上一节中，我们创建了一个简单的动画触发器。但是，这个触发器只能在一个组件中使用，如果我们想在多个组件中使用相同的动画效果，就需要我们将其封装为可重用的动画。
要创建可重用的动画，我们可以将动画触发器定义为一个 Angular 指令。指令可以通过在模板中引入来使用。
以下是一个简单的指令，名为 fadeInDirective，它将 fadeIn 动画触发器应用到任何元素上：
------ - ---------- ---------- - ---- ----------------
------ - ------ - ---- ---------------
------------
--------- ----------
--
------ ----- --------------- -
------------------- --- ----------- -
------------------------------ - ----
--------------------------------- - -------- -------
-
---------- -
----------------------------------- - ----
-
-在这个例子中，我们使用 @Directive 装饰器定义了一个名为 fadeInDirective 的指令，它可以通过指定选择器 [fadeIn] 来应用到元素上。
在 fadeInDirective 的构造函数中，我们将元素的不透明度设置为 0，并指定了过渡效果的持续时间。这样，我们就为动画的基础行为打下了基础。
在 ngOnInit 生命周期钩子中，我们将元素的不透明度设置为 1。这样，在元素出现时，动画就会触发，并将元素淡入页面。
现在，我们可以在任何组件中使用 fadeInDirective，并应用于相应的元素上。
---- ------------- ------------
这个例子中，fadeIn 指令将被应用于 <div> 元素上，当该元素出现时，便会触发动画。
总结
在本文中，我们讨论了如何在 Angular 中创建可重用的动画。我们了解了动画元数据的基础知识，并了解了如何将动画触发器封装为 Angular 指令。
通过这些知识，您现在可以更好地创建和使用动画了。尝试在自己的应用程序中使用这些技术，以创造出更出色的用户体验。
完整示例代码：
animations.ts
------ - -------- ----------- ------ ------- - ---- ----------------------
------ ----- ------ - ----------------- -
-------------------- -
------- -------- - ---
-------------- --------- ------- -------- - ---
--
---fade-in.directive.ts
------ - ---------- ---------- - ---- ----------------
------ - ------ - ---- ---------------
------------
--------- ----------
--
------ ----- --------------- -
------------------- --- ----------- -
------------------------------ - ----
--------------------------------- - -------- -------
-
---------- -
----------------------------------- - ----
-
-app.component.html
---- ------------- ------------
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6531289c7d4982a6eb2c4e7b