title: AngularJS - animating items from one container into another container
body: <p>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. </p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/eQc5q.png" alt="hoping to achieve"></p>
  
  <p>How would I go about doing the same thing in AngularJS?</p>
  
  <p>JS:</p>
  
  <pre><code>var app = angular.module('app', []);
  
  app.controller('Ctrl', function ($scope) {
  
    $scope.selectedItems = [];
    $scope.items = ['a', 'b', 'c'];
  
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-controller="Ctrl"&gt;
  
  &lt;div class='container'&gt; 
    &lt;div class='inline selected-container' &gt;
      &lt;div ng-repeat='selected in selectedItems track by $index'&gt; &lt;!-- I would like items to appear here after items from other container have finished moving --&gt;
        {{selected}}
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="inline"&gt;
      &lt;!-- I would like to push these items left on click --&gt;
      &lt;div class='inline box' ng-repeat="item in items" ng-click="selectedItems.push(item);"&gt; 
        {{item}}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a link to what I have so far:</p>
  
  <p><a href="http://plnkr.co/edit/TZPmsCcR1xMcPW4eIEf3?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/TZPmsCcR1xMcPW4eIEf3?p=preview</a></p>