データのアニメーションのみアニメーションアニメーションの変更

行が追加または削除されたときにアニメーション化したいテーブルがあります。私は、データを取得するために2秒ごとに角度コントローラを呼び出す関数を持っています。すべてが機能しますが、テーブルは2秒ごとにアニメーション化されます。全体が2秒ごとにフェードインします。フェードインまたはフェードアウトするには、新しい行だけを追加または削除したいと思います。ここに私のコードです。データのアニメーションのみアニメーションアニメーションの変更

HTML

<h1> 
Scans 
</h1> 
<body ng-app="myApp" ng-controller="ScansController" > 
    <table id="scansTable" class="table table-striped"> 
     <thead> 
      <tr> 
       <th>ScanId</th> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Time Stamp</th> 
      </tr> 
      <tr ng-repeat="scan in Scans"> 
       <td> 
        {{scan.scanId}} 
       </td> 
       <td> 
        {{scan.firstName}} 
       </td> 
       <td> 
        {{scan.lastName}} 
       </td> 
       <td> 
        {{scan.timeStamp}} 
       </td> 
      </tr> 
     </thead> 
    </table>

CSS

tr { 
opacity: 1; 
} 
tr.ng-enter { 
-webkit-transition: 1s; 
transition: 1s; 
opacity: 0; 
} 
tr.ng-enter-active { 
opacity: 1; 
} 

</style>

コントローラ

出典

2016-09-06 Monzingo

あなたのモジュールに 'ngAnimate'を依存関係としてロードしましたか？例えば'angular.module（ 'app'、['ngAnimate']）;' – cnorthfield

@papakia私はそれを以前は持っていませんでしたが、私はそれを追加しました。 – Monzingo

[anglejsでng-repeatでアニメーションを使用する方法]の可能な複製（http://stackoverflow.com/questions/20580599/how-to-use-animation-with-ng-repeat-in-angularjs） – cnorthfield

コントローラを次のように変更し、アニメーションCSSを削除しました。今私のテーブルはデータの変更にのみアニメーションが、これは配列の長さが異なる場合のみです。

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

myApp.service('dataService', function ($http) { 

this.getData = function() { 

    return $http({ 
     method: 'GET', 
     url: '/api/scans/' 
    }); 
} 
}); 

myApp.controller('ScansController', function ($scope, dataService, $timeout) { 

$scope.Scans = []; 
$scope.NewScans = []; 

function fetchData() { 
    dataService.getData().then(function (result) { 

     $scope.Scans = result.data; 
     $("#scansTable").removeClass('animated bounceIn');   
    }); 
} 

function fetchNewData() { 
    dataService.getData().then(function (result) { 

     $scope.NewScans = result.data; 

     if ($scope.Scans.length != $scope.NewScans.length) 
     {    
      $("#scansTable").addClass('animated bounceIn'); 
      $scope.Scans = $scope.NewScans    
     } 

     $timeout(function() { fetchNewData(); }, 1000); 
    }); 
} 

fetchData(); 
fetchNewData(); 

});

出典

2016-09-06 21:11:09 Monzingo

私はマージを使用することをお勧めします。

変更この行：

$scope.NewScans = result.data;

へ：

angular.merge($scope.NewScans, result.data);

このようにそれをやって、あなたは$ scope.NewScansへの参照を保持し、唯一その変更内容は、アップデートを取得します。

出典

2016-09-06 21:19:26 code90

データのアニメーションのみアニメーションアニメーションの変更

答えて

関連する問題