[英]AngularJS animation from bottom to top
我正在使用AngularJS和一些动画:我需要我的li从下到上加载。
我正在使用一些像这样的简单代码: http : //www.nganimate.org/angularjs/ng-repeat/appear
明确一点,我的问题与字母顺序无关,我需要它们从最后一个到第一个在视觉上加载,期望div从顶部开始而不是从底部开始变大。 有没有一种简单的方法可以做到这一点(也许不涉及太多CSS更改)?
我的建议是使lis在加载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>
您可以在控制器中使用它(不是我使用$ 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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.