我有两个div,其中一个是空的,另一个有一些预定义的项目。点击其中一个列表中的项目,另一个列表将添加项目。
我想实现的是动画效果,使项目从一个列表移动到另一个列表(我希望项目从右向左移动)。我不太了解CSS动画或AngularJS动画。在jQuery中,我只需调用$().animate()来修改属性即可。
那么在AngularJS中,我该如何做相同的事情呢?
JS:
我想实现的是动画效果,使项目从一个列表移动到另一个列表(我希望项目从右向左移动)。我不太了解CSS动画或AngularJS动画。在jQuery中,我只需调用$().animate()来修改属性即可。
那么在AngularJS中,我该如何做相同的事情呢?
JS:
var app = angular.module('app', []);
app.controller('Ctrl', function ($scope) {
$scope.selectedItems = [];
$scope.items = ['a', 'b', 'c'];
});
HTML:
<div ng-controller="Ctrl">
<div class='container'>
<div class='inline selected-container' >
<div ng-repeat='selected in selectedItems track by $index'> <!-- I would like items to appear here after items from other container have finished moving -->
{{selected}}
</div>
</div>
<div class="inline">
<!-- I would like to push these items left on click -->
<div class='inline box' ng-repeat="item in items" ng-click="selectedItems.push(item);">
{{item}}
</div>
</div>
</div>
</div>
这是我目前的进展链接: