使用隱藏動畫創建一個簡單的幻燈片放映效果

Question

在我的應用程序中，我試圖創建一個類似幻燈片效果的效果。

即第一顯示出一定的文本..然後隱藏是（起勁）..then示出了另一一塊文本...然後隱藏它..等等..

有點像幻燈片放映。

在從AngularJS教訓，例如：

http://plnkr.co/edit/DCvvNxnitHpcAowKKSvI?p=info 

我已經設置如下我的CSS：」

.part1 { 
    background-color: blue; 
    opacity: 1; 
    height: 200px; 
} 

.part1.ng-hide-add.ng-hide-add-active, 
.part1.ng-hide-remove.ng-hide-remove-active { 
    -webkit-transition: opacity ease-in 2s; 
    transition: opacity ease-in 2s; 
} 

.part1.ng-hide { 
    opacity: 0; 
} 

.part2 { 
    background-color: red; 
    opacity: 1; 
    height: 200px; 
} 


.part2.ng-hide-add.ng-hide-add-active, 
.part2.ng-hide-remove.ng-hide-remove-active { 
    -webkit-transition: opacity linear 0.5s; 
    transition: opacity linear 0.5s; 
} 

.part2.ng-hide { 
    opacity: 0; 
} 

然而，沒有動畫第一部分及第二和之間發生的事情。

一個plnkr是在這裏：

http://plnkr.co/edit/hrxtvxIIAysEw1iF2DLn?p=info 

有一些其他類，我需要補充的嗎？

Answer 1

你缺少NG-動畫

http://plnkr.co/edit/AwEToSEnSYiZePF5KhO9?p=preview

你必須添加CDN並注入到應用程序，像這樣

['ui.bootstrap', 'ngAnimate'] 

不是100％肯定你想與你的CSS什麼樣的影響，但我猜你必須稍微調整一下，但這會讓角色動畫部分爲你工作。