启用制表符内容的默认过渡动画

Question

我正在尝试从material文档中实现静态选项卡，我只想保留默认转换，就像来自同一文档的动态选项卡一样。我不知道我错过了什么..

这是我到目前为止所提出的。

  .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>