You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
doc(guide/Animations): point to $animate.pin() to enable animation for elements outside an Angular app
Add a section inside of the ngAnimate documentation to point to $animate.pin().
It was not clear in the documentation why animations were being disabled inside of
modals and popup menus. This documentation explains in what situations elements may
be dynamically placed outside of the application DOM and points to the API documentation
on how to enable animations for these types of elements.
Related #14907Closes#14918
Copy file name to clipboardExpand all lines: docs/content/guide/animations.ngdoc
+18Lines changed: 18 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -347,6 +347,7 @@ By setting `transition: 0s`, ngAnimate will ignore the existing transition style
347
347
animations will still execute, though). This can be used to prevent {@link guide/animations#preventing-collisions-with-existing-animations-and-third-party-libraries
348
348
issues with existing animations interfering with ngAnimate}.
349
349
350
+
350
351
## Preventing flicker before an animation starts
351
352
352
353
When nesting elements with structural animations such as `ngIf` into elements that have class-based
@@ -421,6 +422,23 @@ than any styles that are independent from ngAnimate.
421
422
422
423
You can also use one of the two other {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations strategies to disable animations}.
423
424
425
+
426
+
### Enable animations for elements outside of the Angular application DOM tree: {@link ng.$animate#pin $animate.pin()}
427
+
428
+
Before animating, `ngAnimate` checks to see if the element being animated is inside the application DOM tree,
429
+
and if it is not, no animation is run. Usually, this is not a problem as most apps use the `ngApp`
430
+
attribute / bootstrap the app on the `html` or `body` element.
431
+
432
+
Problems arise when the application is bootstrapped on a different element, and animations are
433
+
attempted on elements that are outside the application tree, e.g. when libraries append popup and modal
434
+
elements as the last child in the body tag.
435
+
436
+
You can use {@link ng.$animate#pin `$animate.pin(elementToAnimate, parentHost)`} to specify that an
437
+
element belongs to your application. Simply call it before the element is added to the DOM / before
438
+
the animation starts, with the element you want to animate, and the element which should be its
439
+
assumed parent.
440
+
441
+
424
442
## More about animations
425
443
426
444
For a full breakdown of each method available on `$animate`, see the {@link ng.$animate API documentation}.
0 commit comments