angularJS ng-animate with animate.css

Question

如何使用ng-animate在简单的html元素（如图像段落或div）上使用animate.css？

在一个静态页面中，我只包含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。

首先，你需要在另外的角动画库角：

<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