Question

我有一个简单的AngularJS应用程序，带有<div>和3个按钮。单击按钮时，<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

使用AngularJS指令的动画

1 个答案: