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