ng반복에서 애니메이트를 지연시키는 방법

ng반복에서 애니메이트를 지연시키는 방법

ngAnimate를 사용하여 ngRepeat의 각 항목에서 페이드 인 할 경우 현재 모든 항목이 동시에 페이드 인 됩니다.이전 품목이 50%로 퇴색되어 계단식 효과가 발생한 후 각 품목이 퇴색될 수 있습니까?

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

ngAnimate를 사용하면 각 아이템의 애니메이션을 다음과 같이 지연시킬 수 있으면 좋겠습니다.

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

이것을 해결할 방법이 있습니까?

감사합니다!

GitHub https://github.com/angular/angular.js/issues/2460 에 추가됨

이제 1.2: https://docs.angularjs.org/api/ngAnimate#css-staggering-animations 에서 기본적으로 지원됩니다.

이를 활용하기 위해서는ng-enter-staggerCSS에서 셀렉터를 선택할 수 있습니다.

CSS:

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

sass(사용 중인 경우):

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

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

반복되는 요소에 전환-지연 스타일을 설정하면 이 효과를 얻을 수 있습니다. (v1.1.5 필요)

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

CSS에서 전환 속성을 별도로 설정해야 합니다. 그렇지 않으면 인라인 스타일이 전체 전환을 덮어씁니다.

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

여기 헤이트웰이 만든 예시의 한 갈래가 있습니다.

언급URL : https://stackoverflow.com/questions/15882649/how-to-delay-nganimate-in-ngrepeat