Home Disable animation on md-tabs, angularjs material
Reply: 1

Disable animation on md-tabs, angularjs material

Per
1#
Per Published in 2017-11-14 18:21:42Z

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

The.Bear
2#
The.Bear Reply to 2017-11-15 14:46:57Z

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

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.30843 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO