fix(carousel): respect [animation]="false" (#3964)

Fixes #3961
ng-bootstrap · Jan 21, 2021 · 175c7ab · 175c7ab
1 parent ad3c9c3
commit 175c7ab
Showing 1 changed file with 26 additions and 10 deletions.
diff --git a/src/carousel/carousel-transition.ts b/src/carousel/carousel-transition.ts
@@ -11,27 +11,35 @@ export enum NgbSlideEventDirection {
 
 export interface NgbCarouselCtx { direction: 'left' | 'right'; }
 
-const isAnimated = ({classList}) => {
+const isBeingAnimated = ({classList}: HTMLElement) => {
   return classList.contains('carousel-item-left') || classList.contains('carousel-item-right');
 };
 
-const removeDirectionClasses = ({classList}) => {
+const removeDirectionClasses = (classList: DOMTokenList) => {
   classList.remove('carousel-item-left');
   classList.remove('carousel-item-right');
 };
 
-const removeClasses = ({classList}) => {
-  removeDirectionClasses({classList});
+const removeClasses = (classList: DOMTokenList) => {
+  removeDirectionClasses(classList);
   classList.remove('carousel-item-prev');
   classList.remove('carousel-item-next');
 };
 
 export const ngbCarouselTransitionIn: NgbTransitionStartFn<NgbCarouselCtx> =
     (element: HTMLElement, animation: boolean, {direction}: NgbCarouselCtx) => {
       const {classList} = element;
-      if (isAnimated(element)) {
+
+      if (!animation) {
+        removeDirectionClasses(classList);
+        removeClasses(classList);
+        classList.add('active');
+        return;
+      }
+
+      if (isBeingAnimated(element)) {
         // Revert the transition
-        removeDirectionClasses(element);
+        removeDirectionClasses(classList);
       } else {
         // For the 'in' transition, a 'pre-class' is applied to the element to ensure its visibility
         classList.add('carousel-item-' + (direction === NgbSlideEventDirection.LEFT ? 'next' : 'prev'));
@@ -40,24 +48,32 @@ export const ngbCarouselTransitionIn: NgbTransitionStartFn<NgbCarouselCtx> =
       }
 
       return () => {
-        removeClasses(element);
+        removeClasses(classList);
         classList.add('active');
       };
     };
 
 export const ngbCarouselTransitionOut: NgbTransitionStartFn<NgbCarouselCtx> =
     (element: HTMLElement, animation: boolean, {direction}: NgbCarouselCtx) => {
       const {classList} = element;
+
+      if (!animation) {
+        removeDirectionClasses(classList);
+        removeClasses(classList);
+        classList.remove('active');
+        return;
+      }
+
       //  direction is left or right, depending on the way the slide goes out.
-      if (isAnimated(element)) {
+      if (isBeingAnimated(element)) {
         // Revert the transition
-        removeDirectionClasses(element);
+        removeDirectionClasses(classList);
       } else {
         classList.add('carousel-item-' + direction);
       }
 
       return () => {
-        removeClasses(element);
+        removeClasses(classList);
         classList.remove('active');
       };
     };