ng-Animate-ref가 작동하지 않습니다.

Question

장바구니로 이동하는 목록 항목에 애니메이션을 적용하려고했습니다. 나는 video을 보았습니다. 두 목록 항목의 코드 구조가 동일해야한다는 것을 알았 기 때문에 코드를 재구성했습니다. 또한 각진 설명서를 읽었지 만 어쨌든 코드를 검사 할 때 애니메이션에 대해 작성한 CSS를 찾을 수 없지만 검사 할 때 정확한 ng-animate-ref ID를 볼 수는 있지만 애니메이션이 발생하지는 않습니다.

<div ng-controller="menuCtrl"> 
    <div flex="60" > 
     <ul class="product-list "> 
      <li class="item" ng-repeat="product in products track by product.ID"> 
       <a href="" ng-animate-ref="{{ product.ID }}" ng-click= "addToCart(product)"> 
        <i class="fa fa-cart-plus" style="color: black;" aria-hidden="true"></i> 
       </a> 
       <a href="" ng-click="fnA(product)">{{product.Name}}</a> 
       <a href="" ng-click="fnB(product)"><i class="fa fa-star-o" aria-hidden="true" ></i></a> 
        <button ng-click="fnC(product);">Get Addon</button> 
      </li> 
     </ul> 
    </div> 

    <div flex="40" ng-if="cart.length" > 
     <ul class="product-list "> 
      <li class="item " ng-repeat="product in cart track by product.ID" > 
       <a href="" ng-click="fnA(product)" ng-animate-ref="{{ product.ID }}">{{product.Name}}</a> 
       <a href="" ng-click="fnB(product)"> 
        <i class="fa fa-times" aria-hidden="true" style="text-align: right; color: red; font-size: 12px;vertical-align: middle "></i> 
       </a> 
      </li> 
     </ul> 
    </div> 

css: 

ul li.ng-leave{ 
    opacity:1; 
    -webkit-transition: opacity 25000ms ease ; 
    -moz-transition: opacity 25000ms ease ; 
    -ms-transition: opacity 25000ms ease ; 
    -o-transition: opacity 25000ms ease ; 
    transition: opacity 25000ms ease ; 
} 

ul li.ng-leave-active{ 
    opacity:0; 
} 

a.ng-anchor{ 
    z-index: 10; 
} 

a.ng-anchor-in{ 
    -webkit-transition: all 25000ms ease ; 
    -moz-transition: all 25000ms ease ; 
    -ms-transition: all 25000ms ease ; 
    -o-transition: all 25000ms ease ; 
    transition: all 25000ms ease ; 
} 

I put high values for transition so I could see what was happening. 
I don't see where I went wrong. 

Answer 1

'leave'상태 애니메이션 대신 'enter'애니메이션을 사용해보십시오. 다음이 작동하는지 확인하십시오.

ul li.ng-enter { 
    opacity:0; 

    -webkit-transition: opacity 25000ms ease ; 
    -moz-transition: opacity 25000ms ease ; 
    -ms-transition: opacity 25000ms ease ; 
    -o-transition: opacity 25000ms ease ; 
    transition: opacity 25000ms ease ; 
} 

ul li.ng-enter.ng-enter-active { 
    opacity:1; 
    -webkit-transition: opacity 25000ms ease ; 
    -moz-transition: opacity 25000ms ease ; 
    -ms-transition: opacity 25000ms ease ; 
    -o-transition: opacity 25000ms ease ; 
    transition: opacity 25000ms ease ; 
} 

또한 ngAnimate 의존성이 앱에 추가되었는지 확인하십시오.