Angular Material mdTabs - 如何只獲取標簽動畫效果而不是內容？

Question

我想獲得動畫效果，當有人點擊標簽時，該標簽下方的邊框向右滑動，按鈕具有良好的連鎖效果。 我不想使用標簽內的內容，我只想要標簽效果。

如您所見，單擊第二個選項卡將使邊框向右滑動，但內容也將向左移動。 我只希望標簽按鈕向右滑動，作為我效果的一部分。 我怎樣才能做到這一點？

Answer 1

您可以在樣式中添加它

[role="tabpanel"] {
    transition: none;
}

Answer 2

您可以使用沒有內容的md-tabs指令：

 var app = angular.module('app', ['ngMaterial']); app.controller('myController', function($scope) { $scope.selectedIndex = 0; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-aria.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.min.css"> <md-content ng-app="app" ng-controller="myController"> <md-tabs md-dynamic-height md-border-bottom md-selected="selectedIndex"> <md-tab label="one"></md-tab> <md-tab label="two"></md-tab> <md-tab label="three"></md-tab> </md-tabs> <div layout layout-align="center center">{{ selectedIndex }}</div> </md-content>