AngularJS 지시문이있는 애니메이션

Question

저는 <div>과 3 개의 버튼이있는 간단한 AngularJS 응용 프로그램을 가지고 있습니다. 버튼을 클릭하면 <div>이 바인딩 된 객체가 변경되어 <div>의 위치가 업데이트됩니다. 내가하고 싶은 것은 <div>을 즉시 표시하는 대신 새로운 위치로 미끄러지게하는 것입니다. angularjs 지시문을 만드는 방법과 jQuery.animate를 사용하는 방법을 알고 있지만이 경우 한 유형의 요소를 클릭하고 다른 요소를 조작하려고합니다. 또한 지시문 내에서 DOM 만 조작한다는 원칙을 연구하고 있습니다.

http://jsfiddle.net/s66Ha/4/

<div ng-app="app" ng-controller="Ctrl"> 
<div style="position: relative; height: 100px;"> 
    <div style="position: absolute; left: {{current.left}}px; top: {{current.top}}px;">X</div> 
</div> 

<button ng-repeat="coord in coords" ng-click="move(coord)">{{$index}}</button> 

var app = angular.module("app", []); 

app.controller("Ctrl", function($scope) { 
    $scope.coords = { 
     0: {left: "20", top: "10"}, 
     1: {left: "40", top: "20"}, 
     2: {left: "60", top: "30"} 
    }; 

    $scope.current = $scope.coords[0]; 

    $scope.move = function(coord){ 
     $scope.current = coord; 
    } 
}); 

도와주세요!

Answer 1

귀하의 경우에는 단순히 CSS3의 전환 속성을 사용할 수 있습니다. 이처럼

:

<div style="position: absolute; left: {{current.left}}px; top: {{current.top}}px;transition:all 500ms linear;">X</div> 

Demo