Is it possible to turn off the animation for the modal directive in angular-ui? http://angular-ui.github.io/bootstrap/
Can't find any in the options. Should I modify the source? Or is there any best practice when you want to customize?
To disable all animations for an Angular app, place the @. disabled host binding on the topmost Angular component.
import { NoopAnimationsModule } from '@angular/platform-browser/animations'; instead of import { BrowserAnimationsModule } '@angular/platform-browser/animations'; in your main AppModule and place in the imports array. This turns off animations altogether.
An angular modal component is a form of temporary UI that slides onto the screen, over the page content, and is often used for login/registration forms, selecting options from lists, composing messages, or presenting app configuration options for example.
Currently, the bootstrap classes are embedded in the directive and need to be overridden. If you want to prevent that vertical 'drift' into position of the modal window, place the following 2 classes in your css :
.modal.fade { opacity: 1; } .modal.fade .modal-dialog, .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }
What you would be accomplishing here is the negation of the existing translations. Not ideal, however will do the trick.
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