feat(carousel): add animations (#3804)

src/carousel/carousel-config.spec.ts

@@ -1,8 +1,9 @@
 import {NgbCarouselConfig} from './carousel-config';
+import {NgbConfig} from '../ngb-config';
 
 describe('ngb-carousel-config', () => {
   it('should have sensible default values', () => {
-    const config = new NgbCarouselConfig();
+    const config = new NgbCarouselConfig(new NgbConfig());
 
     expect(config.interval).toBe(5000);
     expect(config.keyboard).toBe(true);

src/carousel/carousel-config.ts

@@ -1,4 +1,5 @@
 import {Injectable} from '@angular/core';
+import {NgbConfig} from '../ngb-config';
 
 /**
  * A configuration service for the [NgbCarousel](#/components/carousel/api#NgbCarousel) component.
@@ -8,11 +9,14 @@ import {Injectable} from '@angular/core';
  */
 @Injectable({providedIn: 'root'})
 export class NgbCarouselConfig {
+  animation: boolean;
   interval = 5000;
   wrap = true;
   keyboard = true;
   pauseOnHover = true;
   pauseOnFocus = true;
   showNavigationArrows = true;
   showNavigationIndicators = true;
+
+  constructor(ngbConfig: NgbConfig) { this.animation = ngbConfig.animation; }
 }

src/carousel/carousel-transition.ts

@@ -0,0 +1,63 @@
+import {NgbTransitionStartFn} from '../util/transition/ngbTransition';
+import {reflow} from '../util/util';
+
+/**
+ * Defines the carousel slide transition direction.
+ */
+export enum NgbSlideEventDirection {
+  LEFT = 'left',
+  RIGHT = 'right'
+}
+
+export interface NgbCarouselCtx { direction: 'left' | 'right'; }
+
+const isAnimated = ({classList}) => {
+  return classList.contains('carousel-item-left') || classList.contains('carousel-item-right');
+};
+
+const removeDirectionClasses = ({classList}) => {
+  classList.remove('carousel-item-left');
+  classList.remove('carousel-item-right');
+};
+
+const removeClasses = ({classList}) => {
+  removeDirectionClasses({classList});
+  classList.remove('carousel-item-prev');
+  classList.remove('carousel-item-next');
+};
+
+export const ngbCarouselTransitionIn: NgbTransitionStartFn<NgbCarouselCtx> =
+    (element: HTMLElement, {direction}: NgbCarouselCtx) => {
+      const {classList} = element;
+      if (isAnimated(element)) {
+        // Revert the transition
+        removeDirectionClasses(element);
+      } 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'));
+        reflow(element);
+        classList.add('carousel-item-' + direction);
+      }
+
+      return () => {
+        removeClasses(element);
+        classList.add('active');
+      };
+    };
+
+export const ngbCarouselTransitionOut: NgbTransitionStartFn<NgbCarouselCtx> =
+    (element: HTMLElement, {direction}: NgbCarouselCtx) => {
+      const {classList} = element;
+      //  direction is left or right, depending on the way the slide goes out.
+      if (isAnimated(element)) {
+        // Revert the transition
+        removeDirectionClasses(element);
+      } else {
+        classList.add('carousel-item-' + direction);
+      }
+
+      return () => {
+        removeClasses(element);
+        classList.remove('active');
+      };
+    };

src/carousel/carousel.module.ts

@@ -3,7 +3,8 @@ import {CommonModule} from '@angular/common';
 
 import {NGB_CAROUSEL_DIRECTIVES} from './carousel';
 
-export {NgbCarousel, NgbSlide, NgbSlideEvent, NgbSlideEventDirection, NgbSlideEventSource} from './carousel';
+export {NgbCarousel, NgbSlide, NgbSlideEvent, NgbSlideEventSource} from './carousel';
+export {NgbSlideEventDirection} from './carousel-transition';
 export {NgbCarouselConfig} from './carousel-config';
 
 @NgModule({declarations: NGB_CAROUSEL_DIRECTIVES, exports: NGB_CAROUSEL_DIRECTIVES, imports: [CommonModule]})