css - Animate.css 和 Angular 4

Question

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

我是否遗漏了什么，或者我错过了关于该主题的任何资源？否则，是否有其他动画库可以与 Angular 4 一起开箱即用？

Answer 1

作为今年 Hacktoberfest 的结果，我从 Animate.css 中剥离了所有动画，并创建了一个 Angular 库，它可以执行 animate.css 所做的一切，并可以使用动态参数。它同时支持 AOT 和 JIT 编译。

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

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

基本上，您可以使用 bool 值触发它们:

<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' })
  ]
})