angularjs - Angular JS 1.3 - Ng-Repeat および Ng-Show 要素のアニメーション化

Question

私はアイテムのリストを持っていng-repeatます。一度に 1 つのアイテムのみが表示され、残りは を使用して非表示になりng-showます。

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

を使用して要素を循環します$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'
    };

});

フェードインとフェードアウト効果で要素間の遷移をアニメーション化したいと思います。使ってみた

.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