Question

尝试在我的ng-repeat中添加动画输入离开和移动效果，但它不起作用任何提示？

脚本：

<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-repeat）：

  <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>

如果您发现任何缺失的东西以触发效果，请告诉我们谢谢！

Answer 1

我不确定你使用哪个版本的Angular但是使用Angular v1.2 ..你可以像下面这样做。

＆＃13;

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();
});

＆＃13;

.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;


}

＆＃13;

<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>

＆＃13;

ng animate不起作用Angular

1 个答案: