CODEWITHSUNDEEP
javascriptcssangularjscss-animations
peppeuz
peppeuz

Reputation: 231

AngularJS animation from bottom to top

I'm using AngularJS and some animations: i need my li to load from bottom to top.

I'm using some simple code like this one: http://www.nganimate.org/angularjs/ng-repeat/appear

Just to be clear, my question doesn't regard the alphabetical order, I need them to visually load from the last one to the first one, expecting the div to get larger starting from the top, not from the bottom. Is there a simple way to do this in angular (maybe not involving too many CSS changes)?

Upvotes: 0

Views: 1480

Answers (1)

standup75
standup75

Reputation: 4814

My suggestion is to make the ul appear when the lis are loaded

so if your html looks like this

<div ng-app ng-controller="ctrl" class="container">
  <ul ng-class="{slideIn: isLoaded}">
      <li ng-repeat="item in list">{{item}}</li>
  </ul>
</div>

You can have this in your controller (not that I use $timeout to get to the next cycle, otherwise, there is no transition)

function ctrl($scope, $timeout) {
        var itemCount=10;
        $scope.list=[];
        while (itemCount--) {
            $scope.list.push("my item "+itemCount);
        }
        $timeout(function(){
            $scope.$apply(function(){
                $scope.isLoaded = true;
            });
        });
    }

And you add the css for the transition

    ul {
      padding: 0;
      position: absolute;
      top: -100%;
      left: 0;
      right: 0;
      transition-property: top;
      transition-duration: 0.4s;
      transition-timing-function: ease-out;
    }
    .slideIn {
      top: 0;
    }

You can see it in action here: http://jsfiddle.net/LBygk/

Upvotes: 1

Related Questions