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

基本上,您可以使用布尔值触发它们:

<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 2

Ariel的解决方案工作得很好,但是如果您想通过npm而不是使用cdn安装animate.css库,您可以执行以下操作...

通过npm安装animate.css npm install animate.css --save
在.angular-cli.json或angular.json中,将styles.css 添加 "../node_modules/animate.css/animate.css", 到"/node_modules/animate.css/animate.css",数组中(参见下面的示例).
重新启动本地服务器并刷新浏览器. "styles"

例:

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

Answer 3

通过npm安装animate.css-

npm install animate.css --save

然后，通过以下方式添加angular-cli.json

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

最后，

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