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/，让我知道您的想法。

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

基本上，您可以使用布尔值触发它们：

<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安装animate.css库而不是使用cdn，则可以执行以下操作...

通过npm安装animate.css npm install animate.css --save
在你的.angular-cli.json或angular.json中，加入 "../node_modules/animate.css/animate.css", 进入styles.css之上的"styles"数组（参见下面的示例）。
重新启动本地服务器并刷新浏览器。 ng serve

示例：

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

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并将其包含在您的应用动画中，就像这样

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

5 个答案: