title: Slide Left animated transition in ng-hide, ng-Animate
body: <p>I have created jsfiddle <a href="http://jsfiddle.net/99vtukjk/" rel="noreferrer">http://jsfiddle.net/99vtukjk/</a>
  On clicking left or right text, currently the animation for hide is upwards, how can we change it to slide left animation e.g slide &amp; fade to left menubar?.</p>
  
  <pre><code>   &lt;body ng-app="myApp1"&gt;
         &lt;div id='outerdiv' ng-controller="MyCtrl" &gt;
               &lt;div ng-click="myValue=true" &gt;LEFT&lt;/div&gt;
               &lt;div  ng-click="myValue=false"&gt;RIGHT&lt;/div&gt;
                 &lt;div id="one" class='animate-hide'  ng-hide="myValue"&gt; 
                 this is just a sample div
                 &lt;/div&gt;
           {{myValue}}
         &lt;/div&gt;
     &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.animate-hide {
   -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
      -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
      -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    line-height:20px;
    opacity:1;
    padding:10px;
    border:1px solid black;
    background:white;
  }
  
  .animate-hide.ng-hide {
    line-height:0;
    opacity:0;
    padding:0 10px;
  }
  </code></pre>
  
  <p>Angular Module</p>
  
  <pre><code>  var app = angular.module("myApp1", ["ngAnimate"]);
      app.controller("MyCtrl", function ($scope) {
      $scope.myValue=false;
      });
  </code></pre>