Angular JS 1.3 - Animating Ng-Repeat and Ng-Show Elements

Question

I have a list of ng-repeat items. Only one of the items are shown at any one time and the rest are hidden using 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>

I cycle through the elements using $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'
    };

});

I would like to animate the transition between the elements with a fade in and fade out effect. I tried using

.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;
}

but this doesn't seem to work.

How would I achieve this animation effect with Angular 1.3?

JSFiddle

score 0 · Accepted Answer · answered Feb 24 '15 at 22:09

I don't think you will get quite the affect you are looking for with showing/hiding the elements within, because they will always be in the same order. But to accomplish what you are asking you would need to target the class that is being added/removed for the fade out, and the basic class for the fade in:

.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 is added when ng-show="{{ falsy }}". test is simply your shown state.

Here is your updated Fiddle. Hopefully this will get you on the right track.

Angular JS 1.3 - Animating Ng-Repeat and Ng-Show Elements

1 Answers1