Angular Material mdTabs - 如何仅获取制表符动画而不是内容的效果？

Question

我希望得到动画效果，当有人点击标签时，该标签下方的边框向右滑动，按钮具有良好的连锁效果。我不想使用标签内的内容，我只想要标签效果。

如您所见，单击第二个选项卡将使边框向右滑动，但内容也将向左移动。我只希望标签按钮向右滑动，作为我效果的一部分。我怎样才能做到这一点？

Answer 1

您可以在样式中添加

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

Answer 2

您可以使用不带内容的md-tabs指令：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;