动画/将一个div移动到NG-Click上的AngularJS中的另一个div

Question

我正在尝试在单击按钮后将一个div移动到另一个div。

我知道这是如何工作在JQuery中，但有没有什么方法可以在angularJS中执行此操作？我正在使用angularJS进行网上商店应用程序，但实际上并没有对角动画做任何事情。添加产品后，会有一个移动div到另一个div，因此您知道您已将产品添加到您的购物车。

这里是为了证明我的意思的图像：

我只是简单地想DIV1移动DIV2。对此最佳做法是什么？任何帮助表示赞赏。额外的div1可以在动画之后隐藏，并在之前的位置重置。

Answer 1

这是stab。它显示了您可以根据需要调整它的基本概念。

想法是你只是计算偏移量，然后使用ng-style和ng-class转换它你需要通过设置calculatePosition变量来实现moveMe。我使用jQuery，因为我很懒。

function moveMe(target){ 
     //do caclculation here: 
    var clickMe = $('.clickMe'); 
    var target = $('.targetMe'); 
    var left = target.offset().left - clickMe.offset().left; 
    var top = target.offset().top - clickMe.offset().top; 
    $scope.calculatePosition = { 
    transform: 'translate(' + left + 'px,' + top + 'px)' 
    } 
    $scope.top = top; 
    $scope.left = left; 
    $scope.animate = true; 
} 

模板：

<div class='container'> 
    <div class='button clickMe' ng-style="calculatePosition" ng-class="{animate: animate}" ng-click="moveMe()"> 
    Div 1 
    </div> 

    <div class='button targetMe'> 
    Div 2 
    </div> 
</div>