아래에서 위로 AngularJS 애니메이션

Question

AngularJS 및 일부 애니메이션을 사용하고 있습니다. 아래에서 위로로드 할 Li가 필요합니다.

나는이 같은 몇 가지 간단한 코드를 사용하고 있습니다 :

그냥 명확하게하기 http://www.nganimate.org/angularjs/ng-repeat/appear는 알파벳 순서를 생각하지 않는 내 질문에, 나는 처음에 마지막에서 시각적으로 부하에 필요, div가 위쪽에서 시작하여 아래쪽에서 시작하는 것이 아니라고 예상합니다. 각도로이 작업을 수행하는 간단한 방법이 있습니까? (너무 많은 CSS 변경이 포함되지 않았을 수 있습니다)?

Answer 1

나의 제안은 LIS가

를로드 할 때 UL이 당신의 HTML이

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

당신은 당신의 컨트롤러이있을 수 있습니다

과 같은 경우 그래서 (I가 $ 제한 시간을 사용하지 것처럼 보이게하는 것입니다 다음 사이클에 도착, 그렇지 않은 경우가 더 전환)

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/