CODEWITHSUNDEEP
angularjsangular-material
Joe
Joe

Reputation: 4254

Disable animation on md-tabs, angularjs material

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

Upvotes: 5

Views: 4557

Answers (1)

The.Bear
The.Bear

Reputation: 5855

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

Upvotes: 10

Related Questions