Animate / Move one div to another div in AngularJS on NG-Click

Question

I'm currently trying to move one div to another div after i click a button.

I know how this works in JQuery but is there any way you can execute this in angularJS? I'm using angularJS for a webshop application but never actually did anything with angular animations. After adding a product there would be a moving div to another div so you know you added a product to your cart.

Here is an image to demonstrate what i mean:

I simply just want to move div1 to div2. What is best practise for this? Any help is appreciated. As extra div1 can hide after the animation and reset on previous position.

Is div2 fixed? Or will it be in diff locations on the page? If you setup the fiddle I'm pretty confident i can help you out. — Nix
– Nix, Commented Sep 23, 2016 at 12:12
Div2 will be on different locations, depending on the device width and height. — Lars Mertens
– Lars Mertens, Commented Sep 23, 2016 at 12:18

Nix · Accepted Answer · 2016-09-23 13:57:11Z

2

Here is a stab. It shows the basic concepts you can tweak it as needed.

Idea is you just calculate the offset, and then transition it using ng-style and ng-class You will need to implement moveMe by setting the calculatePosition variable. I used jquery because I'm lazy.

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;
}

Template:

<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>

edited Sep 23, 2016 at 13:57

answered Sep 23, 2016 at 12:40

Nix

58.8k31 gold badges154 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lars Mertens Over a year ago

Thanks, i adjusted your implementation to fit into the project. Evertime an add to product button is clicked it will fire the moveMe() function. This basically moves the div onto the other div, than animates back to the original position while display is none. I made it so the animation can't be cancelled with setTimeout() so no strange things can happen.

Collectives™ on Stack Overflow

Animate / Move one div to another div in AngularJS on NG-Click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related