angular.module('StackApp', []).config(function($routeProvider) {
'use strict';
$routeProvider
.when('/', {
template: '<h1>Animate Order</h1>' +
'<form action="">' +
'<input type="radio" value="true" name="order" ng-model="order">' +
'<label for="order">reverse</label><br><br>' +
'<input type="radio" value="false" name="order" ng-model="order">' +
'<label for="order">normal</label><br><br>' +
'<input type="radio" value="random" name="order" ng-model="order">' +
'<label for="order">random (click button below to shuffle again)</label><br>' +
'</form>' +
'<input type="button" ng-click="order = \'random\';setOrder()" value="randomize">' +
'<br><br>' +
'<ul id="list" ng-style="{height: ((myList.length * 90) + \'px\')}">' +
'<li ng-repeat="item in myList" ng-style="{top: ((item.row * 90) + \'px\'), left: ((item.column * 90) + \'px\')}">{{$index}} - {{item.order}}. {{item.text}}</li>' +
'</ul>',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
angular.module('StackApp').controller('MainCtrl', function($scope) {
'use strict';
$scope.order = 'false';
$scope.myList = [{
id: 0,
text: 'HTML5 Boilerplate'
},
{
id: 1,
text: 'AngularJS'
},
{
id: 2,
text: 'Karma'
},
{
id: 3,
text: 'Hello'
},
{
id: 4,
text: 'World'
},
{
id: 5,
text: 'How'
},
{
id: 6,
text: 'Are'
},
{
id: 7,
text: 'You'
},
{
id: 8,
text: '?'
},
{
id: 9,
text: 'I'
},
{
id: 10,
text: 'write'
},
{
id: 11,
text: 'more'
},
{
id: 12,
text: 'to'
},
{
id: 13,
text: 'make'
},
{
id: 14,
text: 'the'
},
{
id: 15,
text: 'list'
},
{
id: 16,
text: 'longer'
}
];
$scope.$watch('order', function() {
$scope.setOrder();
});
$scope.setOrder = function() {
var i;
if ($scope.order === 'random') {
var t = [];
for (i = 0; i < $scope.myList.length; i++) {
var r = Math.floor(Math.random() * $scope.myList.length);
while (inArray(t, r)) {
r = Math.floor(Math.random() * $scope.myList.length);
}
t.push(r);
$scope.myList[i].order = r;
}
} else if ($scope.order === 'false') {
for (i = 0; i < $scope.myList.length; i++) {
$scope.myList[i].order = i;
}
} else {
for (i = 0; i < $scope.myList.length; i++) {
$scope.myList[i].order = ($scope.myList.length - 1 - i);
}
}
calcGridPosition();
};
function inArray(a, value) {
for (var i = 0; i < a.length; i++) {
if (a[i] === value) {
return true;
}
}
return false;
}
function calcGridPosition() {
for (var i = 0; i < $scope.myList.length; i++) {
var item = $scope.myList[i];
// columns, left-to-right, top-to-bottom
var columns = 5;
item.column = item.order % columns;
item.row = Math.floor(item.order/columns);
// rows, top-to-bottom, left-to-right
// var rows = 3;
// item.column = Math.floor(item.order/rows);
// item.row = item.order%rows;
}
}
});
#list {
position: absolute;
width: 100%;
list-style-type: none;
padding-left: 0;
}
#list li {
position: absolute;
height: 70px;
width: 70px;
background: #ddd;
-webkit-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
transition: all 2.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<main ng-app="StackApp">
<div class="container" ng-view></div>
</main>
Ben bu sorunu geldi ama bir çözüm oluşturmak için olmadı, yoksa örneklerle uygun bir cevap verdiğine - ancak Planladığım çözüm, listenin bir kopyasına (yani bir denetleyiciye) filtre uygulamak, öğenin yeni dizinini bulmak ve ardından öğeyi bu dizine taşımak için animasyon uygulamaktı. Haklısınız - filtre + ng tekrarı sadece listeyi yeniden oluşturur. Asıl istediğin şey, animasyonu işleyen konumun ayrı ayrı belirlenmesidir. –
Bu çözümden korkuyordum - teşekkürler! – Casey
@AlexOsborn Bunu bir cevap olarak göndermelisiniz. Bana yardımcı oldu! –