Animate.css 和 Angular 4

Question

我已经摸索了一下，似乎真的没有直接的方法可以让 Animate.css 动画在 Angular 中工作。这意味着，动画本质上需要从 Animate.css 库中剥离出来并转换为 Angular 动画。

有什么我遗漏的东西，或者我在这个主题上遗漏的任何资源吗？否则，是否有其他动画库可以在 Angular 4 中开箱即用？

原文由 QuietSeditionist 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

1. 通过 npm 安装 animate.css npm install animate.css --save
2. 在您的 .angular-cli.json 中添加 "../node_modules/animate.css/animate.css", - 或者如果您使用 Angular 6+，请在 angular.json 中添加 "node_modules/animate.css/animate.css", - 到您的 "styles" 数组（见下面的例子）。
3. 重新启动本地服务器并刷新浏览器。 ng serve

Angular 4 & 5 示例：

 "styles": [
    "../node_modules/animate.css/animate.css"
  ],

Angular 6+ 示例：

 "styles": [
    "node_modules/animate.css/animate.css"
  ],

原文由 Darryl Mendonez 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

作为今年 Hacktoberfest 的结果，我已经从 Animate.css 中删除了所有动画，并创建了一个 Angular 库，它可以完成 animate.css 所做的所有事情，并可能使用动态参数。它支持 AOT 和 JIT 编译。

您可以在这里查看我的演示： https ://filipows.github.io/angular-animations/ 并让我知道您的想法。

这是一个可以玩的 Stackblitz： https ://stackblitz.com/edit/angular-animations-lib-demo

基本上，您可以使用布尔值触发它们：

 <div [@bounce]="booleanValue"> </div>

或者当元素进入或离开 DOM 时：

 <div [@fadeInDownOnEnter] [@fadeOutOnLeave]> </div>

它可以从模板中参数化：

 <div [@fadeInDownOnEnter]="{ value: '', params: { duration: 300, delay: 0, translate: '30px' } }" </div>

您唯一需要做的就是在组件文件中导入动画并将其添加到组件装饰器中的动画中：

 @Component({
  ...
  animations: [
    fadeInDownOnEnterAnimation()
  ]
})

您也可以在其中使用参数，但这些参数不能像模板中的那样动态更改：

 @Component({
  ...
  animations: [
    fadeInDownOnEnterAnimation({ anchor: 'customAnchor', duration: 300, delay: 0, translate: '3000px' })
  ]
})

原文由 filipows 发布，翻译遵循 CC BY-SA 4.0 许可协议