title: Clarity about transitions/animations in Ionic
body: <p>I really hope an Ionic ninja reads this. ;)</p>
  
  <p>In both, <a href="https://www.google.com/design/spec/components/tabs.html#tabs-specs" rel="nofollow">Android Material Design (by specification)</a> and in iOS (by UX design trends) <strong>Tabbed Views should be swipe'able and have a sliding transition animation</strong>.</p>
  
  <p>I created an Ionic app (latest version) from the Starter "Tabs". </p>
  
  <pre><code>$ ionic start myApp tabs
  </code></pre>
  
  <p>To give it a more "native" look and feel, I added swiping gestures to each Tab by adding this to each controller:</p>
  
  <pre><code>.controller('TabOneCtrl', function($scope, $ionicTabsDelegate) {
  
      $scope.goForward = function () {
          var selected = $ionicTabsDelegate.selectedIndex();
          if (selected != -1) {
              $ionicTabsDelegate.select(selected + 1);
          }
      }
  
      $scope.goBack = function () {
          var selected = $ionicTabsDelegate.selectedIndex();
          if (selected != -1 &amp;&amp; selected != 0) {
              $ionicTabsDelegate.select(selected - 1);
          }
      }
  
  })
  </code></pre>
  
  <p>and adding this to every view:</p>
  
  <pre><code>&lt;ion-content class="padding" on-swipe-right="goBack()" on-swipe-left="goForward()"&gt;
  </code></pre>
  
  <p><strong>So far, so good - I can swipe between the 3 tabs and their views, but it doesn't feel "native" (at least on Android), because the views just pop up and don't slide in...</strong> So I spent the last 6 hrs googling here, on the Ionic Forums, GitHub and elsewhere - But instead of clarity I am only more confused by the hour. So far I have dug up the following contradicting information:</p>
  
  <ul>
  <li>add <code>animation="slide-left-right"</code> to <code>ion-nav-view</code> </li>
  <li>add <code>animate='slide-left-right"</code> to <code>ion-nav-view</code> </li>
  <li>add <code>class='slide-left-right"</code> to <code>ion-nav-view</code> </li>
  <li>the animation directive has been <strong>removed from Ionic</strong> </li>
  <li>the animation directive should be in the <code>&lt;a&gt;</code> tag</li>
  <li>don't touch it. Ionic will take care of it itself.</li>
  </ul>
  
  <p>and half a dozen other confusing and contradicting information - none of which is working for me. (Strangely enough though <code>nav-direction="back"</code> in an <code>&lt;a&gt;</code> tag produces the correct animation when navigating back.)</p>
  
  <p>Could anyone from the Ionic "cracks" shine some light on this issue and clarify what <strong>the best practice</strong> is for adding page/view transition animations to Ionic apps. I think a lot of newbies would greatly appreciate this (furthermost me myself).</p>