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不能正常工作

回答

相關問題