title: Slide div from left to right in Angular
body: <p><a href="http://plnkr.co/edit/T4SGU7sDV38xH4HqK3eh?p=preview" rel="nofollow">In this plunk</a> I have a div that should move from left to right in a transition when the user clicks on the checkbox. Instead, the div just hides and shows in the new position. How to achieve the transition effect in Angular? </p>
  
  <p>HTML:</p>
  
  <pre><code>Move &lt;input type="checkbox" ng-model="checked" /&gt;
  &lt;div class="panel" ng-class="{ 'class1' : checked, 'class2' : !checked }"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.panel{
    position: fixed;
    background:orange;
    width:100px;
    height:30px;
    top: 10px;
  }
  
  .class1{
    left: 80px;
  }
  
  .class2{
    left: 240px;
  }
  
  
  .class1.ng-show-add-active, .class1.ng-show-remove-active {
  transition: all ease-in-out 2s;
  }
  
  
  .class2.ng-show-add-active, .class2.ng-show-remove-active {
  transition: all ease-in-out 2s;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var app = angular.module("app", ['ngAnimate']);
  app.controller('ctl', function($scope) {
    $scope.checked = true;
  });
  </code></pre>