ng-Animate-ref 不工作答案

【问题标题】：ng-Animate-ref not workingng-Animate-ref 不工作
【发布时间】：2017-05-01 03:40:13
【问题描述】：

我一直在尝试为移动到购物车的列表项设置动画。我看到了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.

【问题讨论】：

使代码更具可读性（尤其是在固定宽度的文本区域中）。但是，plunker (plnkr.co) 对测试提供的代码很有用。

标签： angularjs css css-transforms ng-animate

【解决方案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 依赖项添加到您的应用中。

【讨论】：