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。希望这会让你走上正轨。