@syncfusion/ej2-navigations 20.1.51 → 20.1.55

package/dist/es6/ej2-navigations.es2015.js

@@ -15901,6 +15901,7 @@ const CLS_HOVER = 'e-carousel-hover';
 const CLS_TEMPLATE$2 = 'e-template';
 const CLS_SLIDE_ANIMATION = 'e-carousel-slide-animation';
 const CLS_FADE_ANIMATION = 'e-carousel-fade-animation';
+const CLS_CUSTOM_ANIMATION = 'e-carousel-custom-animation';
 const CLS_PREV_SLIDE = 'e-prev';
 const CLS_NEXT_SLIDE = 'e-next';
 const CLS_TRANSITION_START = 'e-transition-start';
@@ -16264,13 +16265,12 @@ let Carousel = class Carousel extends Component {
     }
     applyAnimation() {
         const animationTarget = this.element.querySelector(`.${CLS_ITEMS$2}`);
-        removeClass([animationTarget], [CLS_FADE_ANIMATION, CLS_SLIDE_ANIMATION]);
+        removeClass([animationTarget], [CLS_CUSTOM_ANIMATION, CLS_FADE_ANIMATION, CLS_SLIDE_ANIMATION]);
         if (this.animation.customEffect) {
-            addClass([animationTarget], this.animation.customEffect);
+            addClass([animationTarget], [CLS_CUSTOM_ANIMATION, this.animation.customEffect]);
         }
         else if (this.animation.effect !== 'None') {
-            const animationClass = this.animation.effect === 'Fade' ? CLS_FADE_ANIMATION : CLS_SLIDE_ANIMATION;
-            addClass([animationTarget], animationClass);
+            addClass([animationTarget], this.animation.effect === 'Fade' ? CLS_FADE_ANIMATION : CLS_SLIDE_ANIMATION);
         }
     }
     autoSlide() {
@@ -16374,8 +16374,15 @@ let Carousel = class Carousel extends Component {
                 isSwiped: isSwiped
             };
             let slideHeight;
-            if (this.animation.effect === 'None' || this.animation.customEffect) {
-                this.onTransitionEnd();
+            if (this.animation.customEffect) {
+                if (direction === 'Previous') {
+                    addClass([args.nextSlide], CLS_NEXT_SLIDE);
+                    addClass([args.currentSlide], CLS_PREV_SLIDE);
+                }
+                else {
+                    addClass([args.currentSlide], CLS_PREV_SLIDE);
+                    addClass([args.nextSlide], CLS_NEXT_SLIDE);
+                }
             }
             else if (this.animation.effect === 'Slide') {
                 if (direction === 'Previous') {
@@ -16394,6 +16401,9 @@ let Carousel = class Carousel extends Component {
                 removeClass([args.currentSlide], CLS_ACTIVE$2);
                 addClass([args.nextSlide], CLS_ACTIVE$2);
             }
+            else {
+                this.onTransitionEnd();
+            }
             this.handleNavigatorsActions(currentIndex);
         });
     }
@@ -16616,6 +16626,7 @@ let Carousel = class Carousel extends Component {
     wireEvents() {
         EventHandler.add(this.element, 'focusin focusout', this.onFocusActions, this);
         EventHandler.add(this.element, 'mouseenter mouseleave', this.onHoverActions, this);
+        EventHandler.add(this.element.firstElementChild, 'animationend', this.onTransitionEnd, this);
         EventHandler.add(this.element.firstElementChild, 'transitionend', this.onTransitionEnd, this);
     }
     unWireEvents() {
@@ -16631,6 +16642,7 @@ let Carousel = class Carousel extends Component {
         if (playIcon) {
             EventHandler.remove(playIcon, 'click', this.playButtonClickHandler);
         }
+        EventHandler.remove(this.element.firstElementChild, 'animationend', this.onTransitionEnd);
         EventHandler.remove(this.element.firstElementChild, 'transitionend', this.onTransitionEnd);
         EventHandler.clearEvents(this.element);
     }