ng animate doesnt work Angular

애니메이션 추가를 시도하고 내 반복에서 효과를 이동하지만 작동하지 않음 힌트가 있습니까?ng animate doesnt 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를 사용하고 있는지 확실하지 않습니다. 다음과 같이 할 수 있습니다. 니스 솔루션과 내가 요소의 나머지 부분은 삭제 된 요소의 위치를 채우기 위해 천천히 움직 이도록 애니메이션이 요소를 삭제하면 내가 원하는 경우 어떻게 @sylwerster

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

? 현재 삭제 된 요소 만 불투명도 1 -> 0의 애니메이션을가집니다 ... ng-move로 끝났습니까? – Ricc

ng animate doesnt work Angular

답변

관련 문제