我知道我可以使用
$animate
服务来调用一个方法,当我手动对任何元素进行动画时(如此答案所建议的),但是我想要检测ng-repeat
动画何时结束。
index.html
<div class="col-sm-6 col-md-4" ng-repeat="cat in cats">
<div class="cat-container card">
<div class="cat-header">
<h4 ng-click="setActive($index)">{{cat.title}}</h4>
</div>
<div class="cat-body">
<div ng-if="cat.img" class="cat-img">
<img ng-src="{{cat.img}}">
</div>
<div class="sub-cats-container">
<div class="sub-cat" ng-animate ng-repeat="subcat in cat.subcats | filter: getSearch($index)">
<div class="cat-img">
<img ng-src="{{subcat.img}}" alt="{{subcat.title}}" width="150px" height="70px">
</div>
</div>
</div>
</div>
</div>
</div>
动画效果
.sub-cat.ng-move,
.sub-cat.ng-enter,
.sub-cat.ng-leave {
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
}
.sub-cat.ng-enter.ng-enter-active,
.sub-cat.ng-move.ng-move-active,
.sub-cat.ng-leave {
opacity: 1;
max-height: 70px;
}
.sub-cat.ng-leave.ng-leave-active,
.sub-cat.ng-enter {
opacity: 0;
max-height: 0px;
}