md-select is causing elements to re-animate

[prestonvanloon]

When clicking to select from md-select, object animations are run again since elements are inserted into the DOM again.

Example: http://plnkr.co/edit/o6dugqwtpR4sXsyMyQWb?p=preview

[rschmukler]

I added a .md-overflow-wrapper-shown class that will allow you to do a rule like the following:

.md-overflow-wrapper-shown .animated { animation-name: none !important; }

This will break animations after the select has been shown, so really a more viable solution is to write a directive. Something like this

[prestonvanloon]

Thank you!

In my case, the CSS class works well.

.md-overflow-wrapper-shown .animated { 
  -o-animation-name:      none !important;
  -moz-animation-name:    none !important;
  -webkit-animation-name: none !important;
  animation-name:         none !important; 
}

Edit: Actually this won't work. That class is getting put onto the body so nothing else will animate. This is a problem when changing view states and trying to animate.

I will go with the directive approach. Thanks again!

[redyyu]

I believe the re-animate problem is cause by 'backdrop'.
Because the backdrop module changed DOM (md-virtual-scroll-container wrapped), almost all html documents, after backdrop removed, the DOM is changed back, that's why the animate will play again.

In my case, I put those code to prevent animation playing wrong.

.md-virtual-scroll-container *{
  -webkit-animation: none !important;
     -moz-animation: none !important;
          animation: none !important;
}

There is other problems etc., click any element will create backdrop while ng-repeat animation is playing.
I have no idea how can I prevent this problem.

[rschmukler]

This is resolved on master in a much better way. The DOM is no longer changed when opening a select so you wont have the pop-in anymore.

[redyyu]

Sorry I am little bit confused. Only select? What about sidenav opened? or did you mean all backdrop has been removed?