AngularJS v1.2.21 ngAnimate for ngRepeat list
AngularJS v1.2.21 ngAnimate for ngRepeat list
提问于 2014-08-14 21:11:55
我想使用Angulars动画模块依次填充以下结果：
<div class="search-result" ng-repeat="plate in searchCtrl.results.plates">
<p class="search-result-value">{{plate.value}}</p>
...
</div>我试过使用错开的技术，但没能让它正常工作。
动画模块正在正确加载，转换试图正常工作，但我一定做错了一些事情。
示例：
*结果：：
(.2s后)结果1
(+= .2s)结果2
(+= .2s)结果3
所以基本上不是所有的结果立即加载，我希望第一个加载，然后第二个，然后第三个..等等(简单地一个一个地展示它们对这个例子来说是可行的，但是渐入佳境会非常好！)
谢谢!
-解决办法
我使用了以下角动画库
<script src="https://code.angularjs.org/1.2.13/angular-animate.js"></script>而不是
<script src="https://code.angularjs.org/1.2.21/angular-animate.js"></script>然后使用下面的CSS来获得我想要的交错动画效果
/* animations */
.search-result.ng-enter {
transition: 0.3s ease-in all;
transform: scale(0.8);
opacity: 0;
}
.search-result.ng-enter-stagger {
transition-delay: 0.09s;
transition-duration: 0s;
}
.search-result.ng-enter.ng-enter-active {
opacity: 1;
transform: scale(1);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2014-08-15 11:15:48
如果不看到其余的代码，很难知道您做错了什么，但是下面是一个例子。
HTML：
<div ng-repeat="plate in plates" class="animation">
<p class="search-result-value">{{plate.value}}</p>
</div>CSS：
.animation.ng-enter {
-webkit-transition: 1s;
opacity: 0;
}
.animation.ng-enter-stagger {
transition-delay: 0.2s;
}
.animation.ng-enter.ng-enter-active {
opacity: 1;
}柱塞： http://plnkr.co/edit/kE3e47WRjE0zHo9P7AO2?p=preview
希望能帮上忙。
编辑-似乎有一个错误影响‘添加五与初始延迟’当使用缩小版本的角动画：https://github.com/angular/angular.js/issues/8297。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25317679
复制相关文章
相似问题
腾讯云开发者
