Animate.css和Angular 4

Question

我已经戳了一下，似乎没有直接的方法让Animate.css动画在Angular中运行。这意味着，动画基本上需要从Animate.css库中删除并转换为Angular动画。

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

Answer 1

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

例：

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

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

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';

Answer 4

我试图让这个css库在Angular 4中运行并找到了解决方案。不要通过npm安装它，只需将Animate.css的cdn链接添加到index.html文件，然后将相应的类添加到元素中。适合我。

编辑：这是你的index.html

<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

这是一个使用Bootstrap的例子：

<li class="col-sm-12 col-md-12 col-lg-4 animated slideInUp">

Answer 5

我创建了这个package来将.css文件转换为可用的.ts文件，只需运行该命令即可

npx css-angular animate.css animate.ts

它会将所有关键帧和类转换为可以使用的keyframes([...])和style({...})。

然后从animate.ts文件导入常量GeneratedStyles并将其包含到您的app动画中，就像这样

import { trigger, transition, animate } from  '@angular/animations';
import { GeneratedStyles } from  './animate';

@Component({
  ...

  animations:[
    trigger("YOUR_ANIMATION_NAME", [
      transition(`:leave`, [
        animate("0.5s ease", GeneratedStyles.Animations.fadeOut)
      ]),

      transition(`:enter`, [
        animate("0.5s ease", GeneratedStyles.Animations.fadeIn)
      ])
    ])
  ]
})