角度淡入淡出 - 沒有CSS的標準方式？

我覺得非常難以作出的動畫角，比較jQuery的。有角動畫淡入淡出和這麼多版本，我發現他們的博客/教程/等，有的則是在老版本的角度。當它的新版本出現以取代舊版本時，Angular似乎非常不協調。我看不到任何標準的做法。因此我不知道從哪裏開始。角度淡入淡出 - 沒有CSS的標準方式？

我只是在形式或HTML文檔淡出按鈕被按下時。

HTML，

<button ng-click="loadInclude" >Load Include Form</button> 
<div ng-include="'form.php'" ng-if="readyToLoadForm===true"></div>

角，

var app = angular.module("myapp", ['ngAnimate']); 

    app.controller("FormController",function($scope) { 

      $scope.readyToLoadForm = false; 
      $scope.loadInclude = function(e) { 
       $scope.readyToLoadForm = true; 
      }; 
     } 
    );

什麼想法？

來源

2014-12-13 laukok

則可以使用angular-animate.js角意願add和remove幾個類時此文件在顯示和隱藏時在這種情況下

<div ng-show="readyToLoadForm" class="animate-show animate-hide">TEST HERE</div>

使用ng-show或ng-hide。基於這些類，我們可以爲元素設置一個css動畫。

這裏是一個簡單plunker

爲ng-include動畫

ng-leave.ng-leave-active.ng-enter-active類添加到元素。有一些關於動畫時添加的類的描述。那說明是從ngAnimate

這裏是ng-enter演示Plunker

這裏是reference的類如何分配給元素時angularjs

來源

2014-12-13 11:28:11

感謝動畫元素。但我如何將它與ng-include整合？ – laukok 2014-12-13 11:39:15

更新答案請:) – 2014-12-13 12:13:11

感謝您的更新。我不斷收到此錯誤'錯誤：$ animate.enter（...）是undefined' - 它似乎是一個版本的問題還是其他什麼東西！ – laukok 2014-12-13 12:30:16

角度淡入淡出 - 沒有CSS的標準方式？

回答

相關問題