Menu
The animation when switching tabs is so laggy. Makes my entire application unusable. A true show-stopper.
I've read many questions on the topic. Is it really total impossible to remove this animation?
https://material.angularjs.org/latest/api/directive/mdTabs
578
Controlling the tab animation If you want to disable the animation completely, you can do so by setting the properties to 0ms . The duration can be configured globally using the MAT_TABS_CONFIG injection token.
The "md" stands for "Material Design", a specific UI look-and-feel developed by Google in 2014. These are not part of Angular itself, but part of a component library built in Angular: "a set of reusable, well-tested, and accessible UI components based on Material Design": https://material.angularjs.org/latest/
mdTabs API Documentation. The <md-tabs> directive serves as the container for 1..n <md-tab> child directives. In turn, the nested <md-tab> directive is used to specify a tab label for the header button and optional tab view content that will be associated with each tab button.
Just add this line of css to disabled it: (PLUNKER)
/* This will disable the panel animation */
md-tabs [role="tabpanel"] {
transition: none;
}
/* This will disable the `ink-bar` animation (border-bottom of selected tab) */
md-tabs md-ink-bar {
transition: none;
}
Additionally, if you want to hide/remove the ink-bar (use display: none instead transition: none) and add custom style the selected tab...
md-tabs .md-active {
font-weight: bold;
/* Add your custom css styles to selected tab here */
}
** Tested and worked from angularjs-material versions > 1.0.0
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
