從下到上的AngularJS動畫

我正在使用AngularJS和一些動畫：我需要我的li從下到上加載。從下到上的AngularJS動畫

我使用的是一些簡單的代碼像這樣的：http://www.nganimate.org/angularjs/ng-repeat/appear

只是要清楚，我的問題並沒有把字母順序，我需要他們在視覺上負載從最後一個到第一個，期待div從頂部開始變大，而不是從底部開始變大。有沒有一種簡單的方法來做到這一點（可能不涉及太多的CSS更改）？

2014-03-12 peppeuz

我的建議是掙錢的時候，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>

你可以在你的控制器有這樣的（不，我用$超時的UL出現進入下一個週期，否則，沒有過渡）

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/

來源

2014-03-12 14:04:51 standup75

從下到上的AngularJS動畫

回答

相關問題