Animate.css与角4

Question

我已经摸索了一下，而且似乎没有任何简单的方法可以让Animate.css动画在角度上工作。也就是说，动画本质上需要从Animate.css库中剥离出来，并转换成角动画。

在这个话题上，我是否遗漏了一些东西，或者错过了什么资源？否则，是否还有其他动画库将开箱即用角4？

Answer 1

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

角4&5例子：

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

角6+例子：

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

Answer 2

作为今年哈克托贝费斯特( Hacktoberfest )的成果，我已经从Animate.css中删除了所有动画，并创建了一个角库，它可以完成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' })
  ]
})

Answer 3

通过npm安装animate.css -

npm install animate.css --save

然后，添加角-cli.json

"../node_modules/animate.css/animate.min.css"

最后，

@import '~animate.css/animate.min.css';