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

【问题标题】：Animate / Move one div to another div in AngularJS on NG-Click在 NG-Click 上的 AngularJS 中动画/移动一个 div 到另一个 div
【发布时间】：2016-09-23 12:06:35
【问题描述】：

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

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

这是一张图片来说明我的意思：

我只是想将 div1 移动到 div2。对此的最佳做法是什么？任何帮助表示赞赏。因为额外的 div1 可以在动画之后隐藏并重置到之前的位置。

【问题讨论】：

div2 修复了吗？或者它会在页面上的不同位置？如果您设置小提琴，我非常有信心可以帮助您。
Div2 将位于不同的位置，具体取决于设备的宽度和高度。

标签： html css angularjs

【解决方案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>

【讨论】：

谢谢，我调整了你的实现以适应项目。每次单击添加到产品按钮时，它都会触发 moveMe() 函数。这基本上将 div 移动到另一个 div 上，而不是在没有显示时动画回到原始位置。我做到了，所以动画不能用 setTimeout() 取消，所以不会发生奇怪的事情。