Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Turn off animation, modal, angular-ui

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?

like image 866
Joe Avatar asked Sep 18 '13 13:09

Joe


People also ask

How to disable animations in Angular?

To disable all animations for an Angular app, place the @. disabled host binding on the topmost Angular component.

How do I disable animations in angular application if using angular material and CDK?

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.

What is modal in angular?

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.


Video Answer


1 Answers

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.

like image 140
beauXjames Avatar answered Sep 28 '22 10:09

beauXjames