從已過濾列表中刪除ng-repeat動畫

我有一個列表，顯示ng-repeat上的一個過濾器：同一個數組的兩個不同部分：刪除和未刪除的項目。我不想有兩個不同的列表，因此我正在過濾來自ng-repeat聲明的數組。從已過濾列表中刪除ng-repeat動畫

當從查看列表中刪除項目時，我希望它們使用淡出動畫製作動畫，並且它工作得很好。然而，2次之間切換時（改變列表中的過濾器），我不希望這樣的動畫，但ng-leave動畫無論如何觸發。

問：如何在點擊「刪除」按鈕時保留動畫，但在「可見」和「刪除」過濾器之間切換時跳過動畫？

HTML：

<div ng-init="myFilter='visible'">Filter: 
    <button ng-class="{'active':myFilter==='visible'}" ng-click="myFilter='visible'">Visible</button> 
    <button ng-class="{'active':myFilter==='deleted'}" ng-click="myFilter='deleted'">Deleted</button> 
</div> 

<div ng-controller="myCtrl" > 

    <div ng-repeat="item in (items | filter:{deleted: (myFilter==='deleted'?true:false) })" class="repeat-item"> 
    {{item}} <div class="delete" ng-show="myFilter==='visible'" ng-click="remove($index)">delete</div> 
    </div> 

</div>

CSS：

.repeat-item.ng-leave { 
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all; 
} 

.repeat-item.ng-leave.ng-leave-active { 
    opacity: 0; 
    height: 0px; 
} 

.repeat-item.ng-leave { 
    opacity: 1; 
    height: 30px; 
}

工作plunkr： http://plnkr.co/edit/aeYCIu?p=preview

來源

2015-06-18 Haji

您好我貼過plunker檢查。

僅增加

class="default-style" ng-class="{'repeat-item': myFilter === 'visible'}">

，並添加CSS類

.default-style{ 
    background: lightblue; 
    margin-bottom: 5px; 
    height: 40px; 
}

和一切工作

http://plnkr.co/edit/WgRYTjVLBNaxXNeXX5wG?p=preview

來源

2015-06-18 10:28:34

謝謝，但它並沒有解決它：從「刪除切換時「到」可見「列表項仍然是動畫。 – Haji

當您單擊刪除動畫發生（可見的刪除）我測試過，但如果你點擊可見沒有動畫發生（刪除，可見）。 –

從已過濾列表中刪除ng-repeat動畫

回答

相關問題