title: angularjs state change animation slide in and out
body: <p>In a single page application, I want to give slide-right for new pages and slide-left for old pages when clicking on the button. Before my state change, I tried to apply the corresponding css class (thanks to <a href="http://dfsq.github.io/ngView-animation-effects/app/#/page/1" rel="nofollow noreferrer">http://dfsq.github.io/ngView-animation-effects/app/#/page/1</a>) to the element having ui-view directive.</p>
  
  <p>In the html if I keep the class, the animation works correctly. But always in one direction.</p>
  
  <pre><code>&lt;div class="site-wrapper slide-right" ui-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But since I have to switch between slide-right and slide-left, I apply the class to ui-view element dynamically as given below.</p>
  
  <pre><code>&lt;div class="site-wrapper" ui-view&gt;&lt;/div&gt;
  
   if(args.slideDir &amp;&amp; args.slideDir==='slide-right') {                    
      angular.element(document.querySelector(elt)).removeClass('slide-left');
      angular.element(document.querySelector(elt)).addClass('slide-right');
   } else {
      angular.element(document.querySelector(elt)).removeClass('slide-right');
      angular.element(document.querySelector(elt)).addClass('slide-left');
   }
  
   $state.go(args.hash);
  </code></pre>
  
  <p>But the page animation works like this. 
  <a href="https://i.stack.imgur.com/Vy74a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vy74a.png" alt="enter image description here"></a></p>
  
  <p>And the real culprit is, AngularJS uses my old DOM while cloning the ui-view element.</p>
  
  <p><a href="https://i.stack.imgur.com/DU5by.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DU5by.png" alt="enter image description here"></a></p>
  
  <p>How can I resolve this?</p>