This repository was archived by the owner on Apr 12, 2024. It is now read-only.
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
ngRepeat incorrect animation #6150
Open
Description
Circular list animation work incorrect with ngRepeat.
Pure js code (work correct):
<!doctype html>
<html ng-app="test">
<head>
<title>test</title>
<meta charset="utf-8" />
<style>
.container {
position: relative;
overflow: hidden;
height: 210px;
}
.item {
position: relative;
width: 100px;
height: 25px;
margin-bottom: 5px;
background: #CCCCCC;
-webkit-transition: all ease-in-out .5s;
transition: all ease-in-out .5s;
}
.item:nth-child(1) {
height: 0;
margin-bottom: 0;
}
.item:nth-child(5) {
background: #FFCCCC;
}
</style>
</head>
<body>
<div id="container" class="container"></div>
<script>
var model = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var container = document.getElementById('container');
for (var i = 0; i < model.length; ++i) {
var div = document.createElement('div');
div.innerHTML = model[i];
div.className = 'item';
container.appendChild(div);
}
document.addEventListener('keydown', function(e) {
if (e.keyCode == 38) {
e.preventDefault();
e.stopPropagation();
container.insertBefore(container.lastChild, container.firstChild);
}
else if (e.keyCode == 40) {
e.preventDefault();
e.stopPropagation();
container.appendChild(container.firstChild);
}
});
</script>
</body>
</html>Use angular (incorrect):
<!doctype html>
<html ng-app="test">
<head>
<title>test</title>
<meta charset="utf-8" />
<style>
.container {
position: relative;
overflow: hidden;
height: 210px;
}
.item {
position: relative;
width: 100px;
height: 25px;
margin-bottom: 5px;
background: #CCCCCC;
-webkit-transition: all ease-in-out .5s;
transition: all ease-in-out .5s;
}
.item:nth-child(1) {
height: 0;
margin-bottom: 0;
}
.item:nth-child(5) {
background: #FFCCCC;
}
</style>
</head>
<body>
<div ng-controller="mainCtrl" class="container">
<div ng-repeat="item in model" class="item">
{{ item }}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script>
angular.module('test', [])
.controller('mainCtrl', ['$scope', '$document', function($scope, $document) {
$scope.model = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$document.on('keydown', function(e) {
if (e.keyCode == 38) {
e.preventDefault();
e.stopPropagation();
$scope.model.unshift($scope.model.pop());
$scope.$digest();
}
else if (e.keyCode == 40) {
e.preventDefault();
e.stopPropagation();
$scope.model.push($scope.model.shift());
$scope.$digest();
}
});
}]);
</script>
</body>
</html>