Angular JS 1.3 - 動畫Ng重複和Ng顯示元素

Question

我有一個ng-repeat項目的列表。任何時候只顯示其中一個項目，其餘項目使用ng-show隱藏。使用$interval

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

myApp.controller('myController', function($scope, $interval){ 

    $scope.index = 1; 
    $scope.changeIndex = function(){ 
     if($scope.index == 3){ 
      $scope.index = 1; 
     } 
     else{ 
      $scope.index = $scope.index + 1; 
     } 
    }; 
    $interval($scope.changeIndex, 3000); 

    $scope.textData = { 
     1: 'one', 
     2: 'two', 
     3: 'three' 
    }; 

}); 

<div ng-app="myApp" ng-controller="myController"> 
    <div class="test" ng-repeat="(key, object) in textData" ng-show="index == key"> 
     {{object}} 
    </div> 
<div> 

我循環通過元件我想與在淡入到動畫效果的元素之間的過渡和淡出效果。我試過使用

.test.ng-move{ 
    -webkit-transition:0.5s linear all; 
    -moz-transition:0.5s linear all; 
    -o-transition:0.5s linear all; 
    transition:0.5s linear all; 
    opacity:0; 
} 

但這似乎不起作用。

如何使用Angular 1.3實現這種動畫效果？

JSFiddle

Answer 1

我不認爲你會得到相當的影響，你正在尋找一個顯示/隱藏中的元素，因爲他們總是會以相同的順序。但要完成你的要求，你需要目標淡出除去正在添加類/，並在基本類的褪色：

.test.ng-hide{ 
    -webkit-transition:0.5s linear all; 
    -moz-transition:0.5s linear all; 
    -o-transition:0.5s linear all; 
    transition:0.5s linear all; 
    opacity:0; 
} 

.test{ 
    -webkit-transition:0.5s linear all; 
    -moz-transition:0.5s linear all; 
    -o-transition:0.5s linear all; 
    transition:0.5s linear all; 
    opacity:1; 
} 

ng-hide在ng-show="{{ falsy }}"時被添加。 test只是你顯示的狀態。

這是您的更新Fiddle。希望這會讓你走上正軌。