Fixed #2499 - Using the transition property on elements inside Carous…

…el causes items become hidden
primefaces · Dec 13, 2021 · e859c5f · e859c5f
1 parent 4100afd
commit e859c5f
Showing 1 changed file with 4 additions and 5 deletions.
diff --git 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>