ng-Animate-ref不能正常工作

我一直在尝试动画列表项目移动到购物车。我看到一个video提到这两个列表项的代码结构需要相同，所以我重构了我的代码。我也阅读了角度文档，但不知何故，当我检查代码时，我无法找到我为动画编写的CSS，尽管在检查时我能够看到正确的ng-animate-ref ID，但动画没有发生。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.

来源

2016-12-15 Rachel

使代码更具可读性（特别是在固定宽度的textarea中）。但是，一个运行程序（https://plnkr.co/）可用于测试提供的代码。 – Alexei

而不是'离开'状态动画，尝试'进入'动画。看看下面的工作：

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依赖项已添加到您的应用程序。

来源

2016-12-15 13:58:35 Tushar

嗨Tushar，我试过了。它仍然不起作用。 – Rachel

ng-Animate-ref不能正常工作

回答

相关问题