Angular mdTabs Material - how to get only tab animation effect, not content?

Question

I want to get an animation effect when someone clicks on a tab, and the frame below this tab slides to the right, while the button has a nice ripple effect. I do not want to use the content inside the tab, I just want the effect of the tab.

As you can see, clicking on the second tab will make the frame slide to the right, but the content will also move to the left. I want the tab button to slide to the right as part of my effect. How can I achieve this?

Answer 1

You can use the md-tabs directive without content:

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

You can add this to styles.

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