ng animate does not work Angular

嘗試添加動畫輸入假期和移動效果在我的ng重複，但它不起作用任何提示？ng animate does not work Angular

腳本：

<script> 
    angular.module('lipapp', ["ngAnimate"]).controller('lipapp_Module_Control', function ($scope, $http, $window) { 
     $scope.CompaignBasket = []; 
     $scope.InitialCompaignBasket = function(){ 
     .....Raw Data 
     } 
    }

CSS3

.animate-enter, 
.animate-leave 
{ 
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    position: relative; 
    display: block; 
} 

.animate-enter { 
    -webkit-transition: 1s linear all; /* Chrome */ 
    transition: 1s linear all; 
    opacity: 0; 
} 

.animate-enter , .animate-enter-active { 
    opacity: 1; 
}

HTML（使用嵌套NG-重複）：

<tr ng-repeat="item in CompaignBasket|filter:Keyword | orderBy:predicate:reverse" ng-animate="'animate'"> 
        <td>{{item.Date}}</td> 
        <td>{{item.Donor}}</td> 
        <td>{{item.City}}</td> 
        <td>{{item.State}}</td> 
        <td ng-repeat="cause_item in item.DonorCauseAmount track by $index"><div ng-show="cause_item != 0">${{cause_item | number:0}}</div></td> 
        <td>${{item.Total|number :0}}</td> 
       </tr>

讓我KN如果你發現任何缺失的東西來觸發效果謝謝！

來源

2014-10-31 Ricc

我不確定您使用的是哪個版本的Angular，但是使用Angular v1.2 ..您可以像下面那樣執行此操作。

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

 
app.controller('MainCtrl', function($scope, $http, $window) { 
 
    $scope.CompaignBasket = []; 
 
    $scope.InitialCompaignBasket = function() { 
 

 
    var i = { 
 
     Date: 1, 
 
     Donor: "Mike", 
 
     City: "London", 
 
     State: "KK" 
 
    }; 
 
    var j = { 
 
     Date: 1, 
 
     Donor: "Tyson", 
 
     City: "New York", 
 
     State: "KK" 
 
    }; 
 
    var k = { 
 
     Date: 1, 
 
     Donor: "Terek", 
 
     City: "Manchester", 
 
     State: "KK" 
 
    }; 
 
    $scope.CompaignBasket.push(i); 
 
    $scope.CompaignBasket.push(j); 
 
    $scope.CompaignBasket.push(k); 
 

 
    } 
 

 
    $scope.InitialCompaignBasket(); 
 
});

.animate.ng-enter, 
 

 

 
.animate.ng-leave { 
 

 

 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
 

 

 
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
 

 

 
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
 

 

 
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
 

 

 
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
 

 

 
    position: relative; 
 

 

 
    text-overflow: clip; 
 

 

 
    white-space: nowrap; 
 

 

 
} 
 

 

 
.animate.ng-leave.animate.ng-leave-active, 
 

 

 
.animate.ng-enter { 
 

 

 
    -webkit-transition: 1s linear all; 
 

 

 
    /* Chrome */ 
 

 

 
    transition: 1s linear all; 
 

 

 
    opacity: 0; 
 

 

 
} 
 

 

 
.animate.ng-enter.ng-enter-active, 
 

 

 
.animate.ng-leave { 
 

 

 
    opacity: 1; 
 

 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.min.js"></script> 
 

 

 
<body ng-app="lipapp"> 
 
    <div ng-controller="MainCtrl"> 
 
    <input type="text" ng-model="Keyword" /> 
 
    <table> 
 
     <tr class="animate" ng-repeat="item in CompaignBasket|filter:Keyword | orderBy:predicate:reverse"> 
 
     <td>{{item.Date}}</td> 
 
     <td>{{item.Donor}}</td> 
 
     <td>{{item.City}}</td> 
 
     <td>{{item.State}}</td> 
 
     <td ng-repeat="cause_item in item.DonorCauseAmount track by $index"> 
 
      <div ng-show="cause_item != 0">${{cause_item | number:0}}</div> 
 
     </td> 
 
     <td>${{item.Total|number :0}}</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 

 
</body>

來源

2014-10-31 22:10:23 sylwester

@sylwerster很好的解決方案，如果我想，當我刪除元素有動畫，使元件的其餘部分慢慢移動，以填補缺失的元素位置是什麼？現在只有被刪除的元素具有來自不透明度1 - > 0的動畫...是否由ng-move完成 – Ricc 2014-11-14 06:56:27

ng animate does not work Angular

回答

相關問題