AngularJS v1.2 ngAnimate和ngView

Question

我想知道為什么這不像例外。 只需嘗試淡入/淡出/退出ng-view的內容。 css3動畫做得不多。 也許我的想法有誤。

請查看此鏈接 （Plunker）

Answer 1

首先，在角度1.2中，不推薦使用ng-animate指令。 你可以簡單地把你想要的課程放在那里。 所以我們創建了一個名為pageFade的類，它看起來像：

.pageFade.ng-enter, .pageFade.ng-leave{
 //transition styles
}

.pageFade.ng-enter{
 opacity: 0;
}
.pageFade.ng-enter-active{
 opacity:1;
}

.pageFade.ng-leave{
 opacity:1;
}
.pageFade.ng-leave-active{
 opacity:0;
}

然后，在視圖中：

<div ng-view class="pageFade"></div>

Answer 2

好吧，我想我弄明白了。 指令改變了。 查看這里的文檔：

http://code.angularjs.org/1.2.0rc1/docs/api/ngAnimate

這是一個分叉的plunkr，演示：

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

Answer 3

對於那些可能有同樣問題的人，我創建了一個關於ngView如何通過動畫過渡的簡單演示。 看看這個演示項目 。

簡而言之，您基本上只需要使用ng-enter ， ng-enter-active ， ng-leave ， ng-leave-active類在CSS中定義動畫規則。 還要記住在模塊中包含ngAnimate依賴項。

希望它可以幫助某人。