Question

我想使用Angulars动画模块按顺序填充以下结果：

<div class="search-result" ng-repeat="plate in searchCtrl.results.plates">
    <p class="search-result-value">{{plate.value}}</p>
    ...
</div>

我尝试过使用交错技术但无法让它正常运行。

animate模块正在正确加载并且转换尝试正常工作，但我必须做错误的操作。

示例：

::结果::

（在.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);
}

Answer 1

如果没有看到剩下的代码，很难知道你做错了什么，但这里有一个例子。

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

Plunker： http://plnkr.co/edit/kE3e47WRjE0zHo9P7AO2?p=preview

我希望它有所帮助。

编辑 - 使用缩小版本的角度动画时，似乎有一个影响“添加五个有初始延迟”的错误：https://github.com/angular/angular.js/issues/8297

AngularJS v1.2.21 ngAnimate用于ngRepeat列表

1 个答案: