ng-repeat上的小動畫動畫（動畫錯誤元素）

我在ng-repeat項目的元素移除中添加了一些動畫，接下來是複製列表的最後一個元素，並在其上應用動畫而不是刪除的動畫。ng-repeat上的小動畫動畫（動畫錯誤元素）

爲什麼動畫不會應用於被移除的元素，而是最後一個被複制？

控制器：

$scope.selectedImgs = []; 

$scope.deleteImg = function() { 
    $scope.selectedImgs.forEach(function(selectedImgIndex, i) { 
    // remove image by index 
    $scope.imgs.splice(selectedImgIndex - i, 1); 
    }); 
    $scope.selectedImgs = []; 
} 

$scope.toggleImg = function(index) { 
    var i = $scope.selectedImgs.indexOf(index); 
    if (i + 1) { 
    $scope.selectedImgs.splice(i, 1); 
    } else { 
    $scope.selectedImgs.push(index); 
    $scope.selectedImgs.sort(function sortNumber(a, b) { 
     return a - b; 
    }); 
    } 
    $scope.$apply(); 
}

模板：

<section class="txtcent"> 
    <img-row class="blk clearfix" size="imgs.length" ontoggle="toggleImg" selected="selectedImgs"> 
    <section ng-repeat="url in imgs track by $index" class="inlblk frameimg"> 
     <div> 
     <img width="150" ng-src="{{url}}" /> 
     </div> 
    </section> 
    </img-row> 
    <span class="noimgmsg" ng-if="!imgs.length">Add images</span> 
</section>

CSS：

.frameimg.ng-leave{ 
    -webkit-animation: 3s removeImgItem; 
} 
@-webkit-keyframes removeImgItem { 
    0% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
}

欣賞你的幫助

來源

2016-04-22 Jocky Doe

那麼究竟是什麼問題？那裏我沒有看到任何問題。 – Aides

@Aides爲什麼動畫不會應用到已移除的元素上，而是它會複製最後一個元素並對其進行動畫處理？ –

您是否自己複製這些元素，還是僅從集合中刪除一個項目？ – Aides

該問題是由track by $index引起的，是一個相對較舊的news。

您可以跟蹤它here

來源

2016-04-23 16:40:09

謝謝，同樣的問題，並修復它，因爲跟蹤$指數 – Adavo

使用角承諾。您的$ defer對象應在動畫完成後解決;然後從ng-repeat顯示的數組中刪除你的項目。

總結：首先做動畫然後（在諾言解決）刪除你的元素。

在這裏你有$ Q（延遲）對象文檔： https://docs.angularjs.org/api/ng/service/ $ Q

promiseOfFinishedAnimation.then(function() { 
    deleteElementFromArrayThatNGRepeatDisplays(); 
});

你的問題是由執行動畫之前刪除的項目致毒。您對不存在的數組項目執行動畫。

來源

2016-04-22 14:16:18

承諾在第一次嘗試時不容易理解，但我希望你嘗試用承諾來解決這個問題 - 它們將對你非常有用在將來 – 2016-04-22 14:20:23

ng-repeat上的小動畫動畫（動畫錯誤元素）

回答

相關問題