From e859c5fe49cecb885f4684cd1e68db30187f27aa Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 13 Dec 2021 10:08:19 +0300
Subject: [PATCH] Fixed #2499 - Using the transition property on elements
 inside Carousel causes items become hidden

---
 src/components/carousel/Carousel.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/carousel/Carousel.js b/src/components/carousel/Carousel.js
index 1d9d2feaaf..7d4b4847e2 100644
--- a/src/components/carousel/Carousel.js
+++ b/src/components/carousel/Carousel.js
@@ -266,8 +266,8 @@ export class Carousel extends Component {
         }
     }
 
-    onTransitionEnd() {
-        if (this.itemsContainer) {
+    onTransitionEnd(e) {
+        if (this.itemsContainer && e.propertyName === 'transform') {
             DomHandler.addClass(this.itemsContainer, 'p-items-hidden');
             this.itemsContainer.style.transition = '';
 
@@ -612,9 +612,8 @@ export class Carousel extends Component {
         return (
             <div className={containerClassName}>
                 {backwardNavigator}
-                <div className="p-carousel-items-content" style={{'height': height}}>
-                    <div ref={(el) => this.itemsContainer = el} className="p-carousel-items-container" onTransitionEnd={this.onTransitionEnd}
-                        onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove} onTouchEnd={this.onTouchEnd}>
+                <div className="p-carousel-items-content" style={{'height': height}} onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove} onTouchEnd={this.onTouchEnd}>
+                    <div ref={(el) => this.itemsContainer = el} className="p-carousel-items-container" onTransitionEnd={this.onTransitionEnd}>
                         {items}
                     </div>
                 </div>