ng-Animate-ref не работает

Question

Я пытаюсь анимировать элементы списка, перемещающиеся в корзину. Я видел video, где было упомянуто, что структура кода для обоих элементов списка должна быть одинаковой, поэтому я также изменил свой код. Я также прочитал угловую документацию, но каким-то образом я не могу найти css, который я написал для анимации, когда я проверяю код, хотя я могу видеть правильный код ng-animate-ref, когда проверяю, но анимации не происходит.

<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

Вместо анимации состояния «оставить» попробуйте анимацию «ввести». Посмотрите, работает ли следующее:

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.