Làm thế nào để trì hoãn ngAnimate trong ngRepeat

Question

Khi sử dụng ngAnimate để mờ dần trong mỗi mục trong ngRepeat, hiện tại tất cả các mục bị mờ dần trong cùng một lúc. Có thể cho mỗi mục mờ dần sau khi mục trước đó đã bị mờ hay không, ví dụ: 50% dẫn đến hiệu ứng xếp tầng?

<ul> 
    <li ng-repeat="phone in phones" ng-animate="{enter: 'phone-fade-enter'}"> 
    <img src="{{phone.img}}"> {{phone.name}} 
    </li> 
</ul> 

Sử dụng ngAnimate sẽ tốt hơn nếu có thể trì hoãn hoạt ảnh của từng mục, ví dụ: như thế này:

<li ng-repeat="phone in phones" ng-animate="{enter: 'phone-enter', delay: 500}"> 

Có cách nào để giải quyết vấn đề này không?

Cảm ơn!

Thêm vào GitHub https://github.com/angular/angular.js/issues/2460

Answer 1

này bây giờ được hỗ trợ natively với 1.2: https://docs.angularjs.org/api/ngAnimate#css-staggering-animations

Để sử dụng nó, sử dụng bộ chọn ng-enter-stagger trong CSS của bạn, như vậy:

css:

.animated.ng-enter-stagger { 
    transition-delay: 0.3s; 
    animation-delay: 0.3s; 
} 

sass (nếu sử dụng):

=stagger($delay) 
    &-stagger 
    transition-delay: $delay 
    animation-delay: $delay 

.animated 
    &.ng-enter 
    +stagger(0.3s) 

Answer 2

Bạn có thể nhận được hiệu ứng này bằng cách thiết lập các phong cách chuyển tiếp chậm trễ trên các yếu tố lặp đi lặp lại. (Yêu cầu v1.1.5)

<li ng-repeat="phone in phones" ng-animate="{enter: 'phone-enter'}" style="transition-delay: {{$index * 500}}ms"> 

Bạn sẽ phải thiết lập thuộc tính chuyển đổi của bạn riêng trong CSS của bạn, nếu không thì phong cách nội tuyến sẽ ghi đè lên toàn bộ quá trình chuyển đổi:

.phone-enter { 
    opacity:0; 
    -webkit-transition-property: all; 
    -webkit-transition-timing-function: ease-out-cubic; 
    -webkit-transition-duration: 400ms; 
} 
.phone-enter.phone-enter-active { 
    opacity: 1; 
} 

Đây là một fork of the example tạo ra bởi heyotwell.