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

尝试使用'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依赖项添加到您的应用中。

ng-Animate-ref无效

1 个答案: