Animate.css 和 Angular 4

Question

我查了一下，似乎确实没有直接的方法让 Animate.css 动画在 Angular 中工作。意思是，动画基本上需要从 Animate.css 库中删除并转换为 Angular 动画。

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

Answer 1

我试图让这个 css 库在 Angular 4 中工作并找到了解决方案。不要通过npm安装，只需将Animate.css的cdn link添加到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 2

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

Angular 4 & 5 示例：

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

Angular 6+ 示例：

"styles": [
    "node_modules/animate.css/animate.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';

Answer 4

由于今年的 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 5

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

npx css-angular animate.css animate.ts

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

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

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

Animate.css 和 Angular 4

Animate.css and Angular 4

css

angular

animation

animate.css