css - angularJS ng-animate 与 animate.css

Question

如何让 ng-animate 与 animate.css 一起处理简单的 html 元素，例如图像段落或 div？

在静态页面中，我只包含 animate.css 和 wow.js 库，并向我想要设置动画的元素添加几个类。但是我没能让它在 ng-view 中工作。

<img class="wow fadeInLeft" src="http://images.ximo365.com/nick-olsen-pose.jpg" alt="Nick Olsen On-the-go shots">

Answer 1

在 Angular 1.2+ 中，您无需在应用程序模块中声明 ng-animate 指令。可以使用纯 CSS 添加动画。

首先，除了 angular 之外，您还需要包含 angular-animate 库:

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular-animate.js"></script>

您需要为您的元素设置 ng-animate 的条件。对于您的图像元素:

<img src='../img/img1.jpg' ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" class=">

您还需要包含所需操作的 CSS，因此对于您的示例:

    .animate-enter, 
.animate-leave
{ 
    -webkit-transition: fadeInLeft 1s;
    position: relative;
    display: block;
    // Etc.
} 

动画将在元素进入时触发。如果你想在页面加载时加载它，那将需要更多的工作。如果你想在显示元素时加载它，你应该使用类似 ng-repeat 的东西，这样当显示该元素时，它会淡入。

参见 nganimate.org docs