Угловой материал mdTabs - как получить только эффект от вкладок анимации, а не содержимого?

Question

Я хочу получить эффект анимации, когда кто-то нажимает на вкладку, а рамка ниже этой вкладки скользит вправо, при этом кнопка имеет хороший эффект пульсации. Я не хочу использовать содержимое внутри вкладки, мне просто нужен эффект вкладки.

Как вы можете увидеть, нажав на второй вкладке будет сделать границу слайд вправо, но содержание также будет двигаться влево. Я хочу, чтобы кнопка вкладки скольжала вправо как часть моего эффекта. Как я могу это достичь?

Answer 1

Вы можете использовать директиву мкр-ушки без содержания:

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>

Answer 2

Вы можете добавить это в стилях

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