Animate.css 和 Angular 4

Posted 2023-03-06

【中文标题】Animate.css 和 Angular 4

【英文标题】：Animate.css and Angular 4

【发布时间】：2018-06-02 13:09:48

【问题描述】：

我已经摸索了一下，似乎真的没有直接的方法可以让 Animate.css 动画在 Angular 中工作。这意味着，动画本质上需要从 Animate.css 库中剥离出来并转换为 Angular 动画。

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

【参考方案1】：

我试图让这个 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">

【参考方案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"
  ],

【讨论】：

"/node_modules/animate.css/animate.css"，就我而言

Arun，您的情况是使用 angular.json 的 Angular 6+ 的正确解决方案。由于原始发帖人询问 Angular 4，他将使用 .angular-cli.json 并且需要“..”来向上移动一个文件夹。不过，感谢您为那些使用更高版本 Angular 的人澄清，这可能与发现这篇文章的其他人更相关。

【参考方案3】：

通过 npm 安装 animate.css -

npm install animate.css --save

然后，添加 angular-cli.json by

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

最后，

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

【参考方案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' )
  ]
)

【参考方案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)
      ])
    ])
  ]
)