javascript - AngularJS动画自下而上

Question

我正在使用 AngularJS 和一些动画:我需要我的 li 从下到上加载。

我正在使用一些像这样的简单代码:http://www.nganimate.org/angularjs/ng-repeat/appear

需要说明的是，我的问题与字母顺序无关，我需要它们以视觉方式从最后一个加载到第一个，期望 div 从顶部开始变大，而不是从底部开始变大。有没有一种简单的方法可以在 Angular 上做到这一点(可能不涉及太多的 CSS 更改)？

Answer 1

我的建议是让 ul 在加载 lis 时出现

所以如果你的 html 看起来像这样

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

你可以在你的 Controller 中有这个(不是我使用 $timeout 进入下一个周期，否则，没有过渡)

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

然后您为转换添加 css

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

您可以在此处查看实际效果:http://jsfiddle.net/LBygk/