1

Web ページに、最新のアイテムを表示する要素があります。数秒ごとに新しい要素をアイテム配列の先頭に追加し、古いアイテムをフェードアウトさせ、新しいアイテムをフェードインさせたい.

問題は、私のコードが現在新しいアイテムにフェードインしておらず (古いアイテムがフェードアウトしている)、古いものをフェードアウトさせたい古いものを押し下げており、そのアニメーションが終了したら新しいものに同じ場所でフェードインします。

HTML

<body ng-app="testApp">
  <div ng-controller="testCtrl">
    <button type="button" ng-click="refresh()">Refresh</button>
    <div ng-animate="{enter:'animated fadeIn', leave:'animated fadeOut'}" ng-repeat="item in items | limitTo:1">
        {{item}}
    </div>
  </div>
</body>

JS

angular.module('testApp',[]);

angular.module('testApp').controller('testCtrl', function($scope){
  $scope.items = ['item 1', 'item 2', 'item 3'];

  $scope.refresh = function() {
    var newItems = $scope.items.slice(1).concat($scope.items.slice(0,1));
    $scope.items = newItems;
  };

});

CSS

@import animate.css

ここでやりたいことの非常に単純化されたバージョンがあります: http://jsfiddle.net/ErhQB/

私の実際のアプリでは、「更新」ボタンはタイムアウトです (そして、$scope.refresh のコードは $apply にラップされています)。

私はこれを間違ってやっているとかなり確信していますが、アニメーションイベントをトリガーする方法がわかりません。または、表示したいアイテムで更新する $scope.item モデルを作成しますが、方法がわかりませんそれを ng-animate (またはその他の方法) で使用します。

ご協力いただきありがとうございます。

4

0 に答える 0