NG-ClickでAngularJSの1つのdivを別のdivにアニメート/移動

Question

ボタンをクリックした後、あるdivを別のdivに移動しようとしています。

私はこれがJQueryでどのように機能するのか知っていますが、これをangularJSで実行する方法はありますか？私はwebshopアプリケーションのためにangularJSを使用していますが、角度アニメーションでは実際に何もしませんでした。製品を追加した後、divを別のdivに移動するので、カートに商品を追加したことがわかります。ここで

は私が何を意味するか実証するための画像です：

私は単純にDIV2にDIV1を移動したいです。これのベストプラクティスは何ですか？どんな助けもありがとうございます。余分な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>