AngularJS - animating items from one container into another container

Question

I have two divs, one starts empty, the other has some predefined items. On clicking items in one list, the other list gets items added to it.

What I would like to achieve is to animate items from one list to appear to physically move to the other. (I would like items to move from right to left). I don't know too much about CSS animations, or AngularJS animation. In jQuery, I could just call $().animate() on the div id to modify the properties.

hoping to achieve

How would I go about doing the same thing in AngularJS?

JS:

var app = angular.module('app', []);

app.controller('Ctrl', function ($scope) {

  $scope.selectedItems = [];
  $scope.items = ['a', 'b', 'c'];

});

HTML:

<div ng-controller="Ctrl">

<div class='container'> 
  <div class='inline selected-container' >
    <div ng-repeat='selected in selectedItems track by $index'> <!-- I would like items to appear here after items from other container have finished moving -->
      {{selected}}
    </div>
  </div>

  <div class="inline">
    <!-- I would like to push these items left on click -->
    <div class='inline box' ng-repeat="item in items" ng-click="selectedItems.push(item);"> 
      {{item}}
    </div>
  </div>
</div>

</div>

Here is a link to what I have so far:

http://plnkr.co/edit/TZPmsCcR1xMcPW4eIEf3?p=preview

I would *think* that the best way to do this would be animate the item while it's still in one list to make it appear to join the other list, and then switch lists programatically after the animation completes. But I hope there's a cooler method. — jraede, Mar 21 '14 at 16:24
@EliranMalka, I've already read that, that also doesn't address the question at hand. — SoluableNonagon, Mar 21 '14 at 18:00
correct, i just thought it would help shedding light on things. didn't mean to be rude. — Eliran Malka, Mar 21 '14 at 18:04

score 1 · Accepted Answer · answered Mar 21 '14 at 18:22

I read a decent explanation of ng-animate on this page : http://www.jvandemo.com/how-to-create-cool-animations-with-angularjs-1-2-and-animate-css/

Essentially, you need to define animations in your CSS, then attach ng-enter and ng-leave to your classes which you want to implement those animations.

/* Define your Animation , or just download animate.css which has all these defined*/ 
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

You have to attach animations to your elements in the CSS:

/* Apply your animation, which will run on ng-repeat, ng-hide, ng-show, etc */
.item {
   /* this is the element you're animating  */
}
.item.ng-enter {  /* attach ng-enter */
    -webkit-animation: fadeInLeft 1s;
    -moz-animation: fadeInLeft 1s; 
    -ms-animation: fadeInLeft 1s;
    animation: fadeInLeft 1s;
}
.item.ng-leave { /* attach ng-leave */
    -webkit-animation: fadeOutLeft 1s;  /*  */
    -moz-animation: fadeOutLeft 1s;
    -ms-animation: fadeOutLeft 1s; 
    animation: fadeOutLeft 1s;
}

Updated:
http://plnkr.co/edit/TZPmsCcR1xMcPW4eIEf3?p=preview

AngularJS - animating items from one container into another container

1 Answers1