"Seamlessly transition between items in a ng-repeat loop

Question

"Seamlessly transition between items in a ng-repeat loop

My list of names in the scope is pretty straightforward:

$scope.friends = [
    {name:'John'},
    {name:'Jessie'},
    {name:'Johanna'},
    {name:'Joy'},
    {name:'Mary'},
    {name:'Peter'},
    {name:'Sebastian'},
    {name:'Erika'},
    {name:'Patrick'},
    {name:'Samantha'}
  ];

I want to create a unique animation where each name transitions in one after the other, like a chain. I'm currently using ng-repeat to display these names on the front end.

I came across an effect similar to what I am looking for in this example: http://jsfiddle.net/57uGQ/, but I want to avoid using jQuery libraries.

Is there a way to achieve this effect using the ng-animate library?

Feel free to check out the plunker: http://plnkr.co/edit/aGwEe2jlGBTvjoSsiK9p?p=preview

css angularjs ng-animate

Answer 1

Answer №1

To achieve the desired effect shown in the jsfiddle example, you can utilize a combination of ng-if, $timeout, and the .ng-enter-stagger css class.

Here is how you can structure your html:

<div ng-controller="repeatController">
  <ul>
    <li class="animate-repeat" ng-repeat="friend in friends" ng-if="!hidden">
      {{friend.name}},
    </li>
  </ul>
</div>

For the JavaScript part:

angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope, $timeout) {
  $scope.friends = [
      {name:'John'},
      {name:'Jessie'},
      {name:'Johanna'},
      {name:'Joy'},
      {name:'Mary'},
      {name:'Peter'},
      {name:'Sebastian'},
      {name:'Erika'},
      {name:'Patrick'},
      {name:'Samantha'}
    ];
  $scope.hidden = true;
  $timeout(function(){
    $scope.hidden = false;
  }, 10);   
});

And for the styling (css):

.animate-repeat.ng-enter {
  transition: 1s linear all;
  opacity: 0;
}
.animate-repeat.ng-enter-stagger {
  transition-delay: 1.2s;
  transition-duration: 0s;
}
.animate-repeat.ng-enter.ng-enter-active {
  opacity: 1;
}

You can view a working example on Plunker.

Answer 2

To achieve the desired effect shown in the jsfiddle example, you can utilize a combination of ng-if, $timeout, and the .ng-enter-stagger css class.

Here is how you can structure your html:

<div ng-controller="repeatController">
  <ul>
    <li class="animate-repeat" ng-repeat="friend in friends" ng-if="!hidden">
      {{friend.name}},
    </li>
  </ul>
</div>

For the JavaScript part:

angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope, $timeout) {
  $scope.friends = [
      {name:'John'},
      {name:'Jessie'},
      {name:'Johanna'},
      {name:'Joy'},
      {name:'Mary'},
      {name:'Peter'},
      {name:'Sebastian'},
      {name:'Erika'},
      {name:'Patrick'},
      {name:'Samantha'}
    ];
  $scope.hidden = true;
  $timeout(function(){
    $scope.hidden = false;
  }, 10);   
});

And for the styling (css):

.animate-repeat.ng-enter {
  transition: 1s linear all;
  opacity: 0;
}
.animate-repeat.ng-enter-stagger {
  transition-delay: 1.2s;
  transition-duration: 0s;
}
.animate-repeat.ng-enter.ng-enter-active {
  opacity: 1;
}

You can view a working example on Plunker.

"Seamlessly transition between items in a ng-repeat loop

Answer №1

Similar questions

What causes the content of my container to disappear following a setInterval div swap in Internet Explorer?

Customizable Designs in Oracle Application Express version 4.2

Trigger a function when the value of the file input field changes using ng-change

"Troubleshooting the issue of Angular JS ng-click HTML being assigned via InnerHTML but not properly invoking

Achieving horizontal scrolling for tables without using div wrappers

What is the best way to create a sticky menu bar?

Encountering H10 Error and 503 Status When Deploying MEAN App on Heroku

What is the procedure for selecting the Today button on the angular-ui date picker popup?

Type content in HTML5

Safari shows a contrasting outcome

AngularJS session timeout refers to the period of inactivity before

I have added the same directive to both of my HTML files

Creating a sticky menu in a column using affix with a CSS bootstrap list-group

Easily integrating a JavaScript file into an HTML document when utilizing a NodeJS Express server

The hover effect on MUI TableRows is being overshadowed by the background color of the TableCell

Establish the height of the root to be the same as the height

What sets Angular and Meteor apart from each other?

What are some tips for getting media queries to function properly?

How to perfectly center an absolute positioned icon on a 767px screen

Struggling with color styling within link_to tags in Rails 4 - having trouble getting inline styling to show up correctly