AngularJS 1.2中的動畫 - 如何

我試圖在我的應用程序中使用動畫，但不幸的是無濟於事。我查了很多例子，blog，下載animate.css等等等等AngularJS 1.2中的動畫 - 如何

我注射動畫模塊，嘗試了基本的例子，嘗試以下tutorials例如，但似乎每次我想念的東西。

是否有人可以提供AngularJS v1.2動畫工作的確切說明，包括注射，內含物和所有你需要做的工作來讓他們工作？也許一步一步地指導你如何平時做你的動畫。

ng-show/hide上的基本淡入/淡出示例就足夠了。

非常感謝您

來源

2014-02-12 trainoasis

你可能有興趣在這個演示程序：http://dfsq.github.io/ngView-animation-effects/app。 – dfsq

這是特別爲ngView？我有興趣使用ng-show指令顯示/隱藏div的動畫嗎？ – trainoasis

參考角animate.js

添加ngAnimate作爲從屬模塊：

myApp = angular.module('myApp', ['ngAnimate']);

添加一個div到您的視圖與ng-show指令，例如兩個類別的「淡入淡出」和「淡出」：
```
<div class="fadein fadeout" ng-show="show">I am the div.</div> 
```

將這些類添加到您的CSS。 1.2 ngAnimate是基於類的，您需要根據特定的命名約定爲您的類添加某些後綴。關於這方面的一個很好的信息來源可以在here找到。

實施例：

/* Fade in ngShow */ 
.fadein.ng-hide-remove { 
    -webkit-transition: 1s; 
    transition: 1s; 
    display: block !important;  
    opacity: 0; 
} 

.fadein.ng-hide-remove.ng-hide-remove-active { 
    opacity: 1; 
} 


/* Fade out ngShow */ 
.fadeout.ng-hide-add { 
    -webkit-transition: 1s; 
    transition: 1s;  
    display: block !important;  
    opacity: 1; 
} 

.fadeout.ng-hide-add.ng-hide-add-active { 
    opacity: 0; 
}

添加邏輯以改變被提供給ng-show指令的表達和在div應淡入和淡出。

工作的示例：http://plnkr.co/edit/lq4LmUq5mrbJBGMMEyh9?p=preview

來源

2014-02-12 21:16:25 tasseKATT

woooah，這終於奏效！我可能不止一次地使用過幾乎相同的場景，但它從來沒有奏效。謝謝 – trainoasis

AngularJS 1.2中的動畫 - 如何

回答

相關問題