Turn off animation, modal, angular-ui

Question

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?

score 35 · Accepted Answer · answered Apr 29 '14 at 19:30

35

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.

answered Apr 29 '14 at 19:30

beauXjames

8,222
3
49
66

2

should be the same, but override .model-backdrop.fade – beauXjames Jun 11 '14 at 16:50
can also use backdrop: false in options while creating modal – 10101010 Nov 01 '19 at 07:09

score 19 · Answer 2 · answered Jan 16 '16 at 19:39

19

animation (Type: boolean, Default: true) - Set to false to disable animations on new modal/backdrop. Does not toggle animations for modals/backdrops that are already displayed.

var modalInstance = $uibModal.open({
  animation: false

answered Jan 16 '16 at 19:39

Mo.

26,306
36
159
225

1

Thanks this is the best solution – David Apr 26 '17 at 09:41
@Worthy7 Which version are you using ? – Mo. Oct 16 '17 at 14:35
@MuhammedAthimannil 0.12.1 (gotta support IE8) FYI, the slowness of the modal (even with a few css hacks) is no where near as fast as I want, changing page entirely (within angular) is faster than loading a modal – Worthy7 Oct 17 '17 at 01:44
@Worthy7 You mean `AngularJS 0.12.1` ? – Mo. Oct 17 '17 at 16:30

guya · Answer 3 · 2014-03-17T18:57:06.860

An easy way to turn off the animation is to add !important styles to the modal.

For all Modals

You can do that globally for all the modals with this CSS class (put it anywhere in your css):

.modal {
   top: 25% !important;
   opacity: 1 !important;
}

It will eliminate the "slide from top" animation and also the opacity animation. Personally I prefer to only eliminate the first and use only top: 25% !important;

You can also eliminate the backdrop animation globally using this class (put it anywhere in your css):

.modal-backdrop {
   opacity: 0.8 !important;
}

For a Specific modal

You can eliminate the animations of a specific modal using the windowClass param.

.no-animation-modal {
  top: 25% !important;
  opacity: 1 !important;
}

Using windowClass:

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: ModalInstanceCtrl,
  windowClass: 'no-animation-modal'
});

The border-radius of the modal top will missing when use this style. — Raymond Liao, Dec 12 '19 at 09:57

score 0 · Answer 4 · answered Sep 27 '13 at 00:48

0

Don't have a full answer, but I'm having a similar issue and thought I'd chime in. I know that this used to be possible in angular-ui/bootstrap 0.5. There might be breaking changes in 0.6, and I'm trying to find an answer, but the documentation is pretty lacking.

Here is the example given in 0.5. Notice you can set options like backdropFade but I can't find the equivalent in 0.6. Might have something to do with removing $dialogProvider.

answered Sep 27 '13 at 00:48

Kenjamin

53
8

Kenjamin, you should update answer with [https://github.com/angular-ui/bootstrap/issues/1085] showing that it is suggested to override the HTML template in your source to make changes. For instance, I overrode the tpls example template with the same code just removing the fade class. – d456 Nov 19 '13 at 16:16

score 0 · Answer 5 · answered Dec 12 '19 at 10:06

The below is working well for me, whatever the animation: false or animation: true:

<style>
        .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);
        }

        .modal-backdrop {
            opacity: 0.8 !important;
        }

</style>

Turn off animation, modal, angular-ui

5 Answers5

For all Modals

For a Specific modal

Linked