Animations are turned on by default and available on all standard bootstrap components.
They are implemented with CSS Transitions that use classes defined in Bootstrap specifications. You could use your own theme or simply override default styles to customize them (ex. you could change the transition duration). Same as with Bootstrap, all animations respect the Reduced Motion setting.
Playing with animations has been a lot of work, as we had to introduce asynchronous transitions and new APIs, while keeping synchronous code without the animations. This is an important point, as it allows to keep existing tests (unit and e2e tests) unchanged.
Animations are enabled by default. You can opt-out and disable them with a simple flag and everything will run synchronously as before (ex. for unit tests). You can disable animations at different levels:
To turn off animations globally, inject NgbConfig
at your application root and change the
animation
flag:
You can also choose to disable them by component type, by changing the component configuration:
The last option is to activate/deactivate animations at the component instance level:
Animations don't work with structural directives like ngIf
or ngFor
. Unfortunately
Angular doesn't provide any APIs to delay DOM removal.
The most impacted widgets are Alert and Toast. For example, to animate alert closing, you will need to use the imperative API, then toggle some flag at the animation end actually remove the element from the DOM.
It will also not work with the control flow syntaxe like @if
or @for
.
The second limitation concerns
the router integration with the Nav component. As the router-outlet
is not directly connected to the Nav, no animation will run either. Two
workarounds are available:
ActivatedRoute
to initialise the active nav with the url information.
You don't have anything special to do to handle animations apart from alert and toast. But you have some new APIs available to be notified when transitions finish. Here is a quick overview.
New (shown)
and (hidden)
outputs at accordion and panel levels. See
API docs for payload details.
New (closed)
output that notifies that transition has finished.
New .close()
method that triggers closing transition and returns an observable to be notified when it
is done.
New (slid)
output at both carousel and slide levels. See
API docs for payload details.
New (shown)
and (hidden)
outputs and a new .toggle()
method.
New .shown
and .hidden
observable APIs.
New (shown)
and (hidden)
outputs at nav and item levels. See
API docs for payload details.
They both have new (shown)
and (hidden)
outputs.
New (shown)
and hidden
outputs.
New .show()
and .hide()
methods that trigger transitions and return an observable to be
notified when it is done.