使用 Angular 1.2 和 Animate.css 加载动画？答案

【问题标题】：Using Angular 1.2 and Animate.css for loading animation?使用 Angular 1.2 和 Animate.css 加载动画？
【发布时间】：2014-10-07 05:06:21
【问题描述】：

我正在尝试使用 Angular 1.2 和 Animate.css 让页面在加载时进行动画处理。

这是 Plunker：http://plnkr.co/edit/oDiDfRCO2Msc0StNrtqH

我希望背景交叉淡入，右侧的黄色菜单从右侧滑入。

在 main.html 中：

<div>
  <div class="background-container">
    <my-Background></my-Background>
  </div>

  <div class="menu-container">
      <my-Menu id="menu"></my-Menu>
  </div>

</div>

在 main.css 中：

.menu-container.ng-enter {
    animation:3s fadeInRightBig;
}


.background-container.ng-enter {
    animation:3s fadeInDown;
}

main.css 中定义的动画似乎没有被触发。我很确定这是由于加载 css 的顺序和/或时间，尽管我可能要处理多个问题。

从动画的角度来看，确保所有内容都已加载并准备就绪以使动画在加载时工作的“正确”方法是什么？

【问题讨论】：

您是否尝试过使用animated 类？ <div class="animated fadeInDown background-container"> ...和<div class="animated fadeInRightBig menu-container">
还有 ngFx 模块，它是 Angular 的 Animate.css。
@mobabur94 我会研究一下 ngFx，它看起来很有希望。

标签： javascript angularjs css-animations ng-animate animate.css

【解决方案1】：

你可以试试 nganimate ，一个简单的文档供你参考 https://docs.angularjs.org/api/ngAnimate

【讨论】：

【解决方案2】：

您是否看过类似 HTML5 加载器的东西来在加载 DOM 时加载您的初始资产。有一个 jQuery 插件，我知道它不是 Angular 和另一个库，但它可能有助于您的操作顺序。

http://gianlucaguarini.github.io/jquery.html5loader/

【讨论】：

谢谢，我看了一下，但正如你指出的那样，我真的在寻找正确的“角度方式”来做到这一点。