angularjs - タブコンテンツのデフォルト遷移アニメーションを有効にする

Question

マテリアルドキュメントの静的タブのみを実装しようとしていますが、同じドキュメントの動的タブと同じようにデフォルトのトランジションを維持したいと考えています。何が足りないのかわからない..

これが私がこれまでに思いついたものです。

  .controller('AppCtrl', function( $scope ) {
    $scope.setting = {
      selectedIndex : 0
    };
    
    $scope.next = function() {
      $scope.data.selectedIndex = Math.min($scope.data.selectedIndex + 1, 2) ;
    };
    $scope.previous = function() {
      $scope.data.selectedIndex = Math.max($scope.data.selectedIndex - 1, 0);
    };
  });

.md-tabs-content {
  overflow: hidden;
  width: 100%;
  height:100%;
  position: absolute; }
  .md-tabs-content [role="tabpanel"] {
    height: 100%; }
    .md-tabs-content [role="tabpanel"].ng-hide.ng-animate {
      display: block !important; }
    .md-tabs-content [role="tabpanel"].ng-animate {
      -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
              transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
      -webkit-transform: translateX(0);
              transform: translateX(0); }
    
    [role="tabpanel"].ng-enter-active {
        transform: translateX(0);
    }

    [role="tabpanel"].ng-leave-active {
        transform: translateX(-100%);
    }

    [role="tabpanel"].ng-leave.ng-transition-rtl {
        transform: translateX(-100%);
    }


/**
 * animation ng tab buttons
 */
  .navigation {
      width: 100%;
      bottom: 0;
      position: fixed;
      z-index: 2; }

  .navigation md-tab {
    color: #90caf9 !important; }

  .navigation md-tab.active, .navigation md-tab:focus {
    color: white !important; }

  .navigation md-tab[disabled] {
    opacity: 0.5; }

  .navigation .md-header .md-ripple {
    border-color: #FFFF8D !important; }

  .navigation md-tabs-ink-bar {
    background-color: #FFFF8D !important; }

  .navigation md-tabs .md-paginator {
    color: white; }

<div ng-controller="AppCtrl" layout="column" class="main">
            
            <section class="contents md-tabs-content" flex>
                <ng-switch on="setting.selectedIndex" class="tabpanel-container">

                    <div role="tabpanel"
                         id="tab1-content"
                         aria-labelledby="tab1"
                         ng-switch-when="0"
                         md-swipe-left="next()"
                         md-swipe-right="previous()"
                         style="background-color:#f00">
                        View for Item #1<br/>
                        data.selectedIndex = 0
                    </div>

                    <div role="tabpanel"
                         id="tab2-content"
                         aria-labelledby="tab2"
                         ng-switch-when="1"
                         md-swipe-left="next()"
                         md-swipe-right="previous()"
                         style="background-color:#0f0">
                        View for Item #2<br/>
                        data.selectedIndex = 1
                    </div>

                    <div role="tabpanel"
                         id="tab3-content"
                         aria-labelledby="tab3"
                         ng-switch-when="2"
                         md-swipe-left="next()"
                         md-swipe-right="previous()"
                         style="background-color:#00f">
                        View for Item #3<br/>
                        data.selectedIndex = 2
                    </div>

                </ng-switch>
            </section>
            
            <section class="navigation" flex>
                <md-tabs class="md-accent" md-selected="setting.selectedIndex">
                    <md-tab id="tab1" aria-controls="tab1-content">
                        tab1
                    </md-tab>
                    <md-tab id="tab2" aria-controls="tab2-content">
                        tab2
                    </md-tab>
                    <md-tab id="tab3" aria-controls="tab3-content">
                        tab3
                    </md-tab>
                </md-tabs>
            </section>
        </div>