fix(ui5-flexible-column-layout): correct columns display (#3444)

Sometimes timeout that adds ui5-fcl-column--hidden is executed when the calculations are already done. Executing the timeout callback later causes visual issue where column is hidden when it should be displayed.

Now, timeout is replace with listener for transionend so if it is no longer needed to be removed.

Fixes: #3425

Author: nnaydenow

packages/fiori/src/FlexibleColumnLayout.js

@@ -311,6 +311,10 @@ class FlexibleColumnLayout extends UI5Element {
 
 	onExitDOM() {
 		ResizeHandler.deregister(this, this._handleResize);
+
+		["start", "mid", "end"].forEach(column => {
+			this[`${column}ColumnDOM`].removeEventListener("transitionend", this.columnResizeHandler);
+		});
 	}
 
 	onAfterRendering() {
@@ -407,20 +411,23 @@ class FlexibleColumnLayout extends UI5Element {
 			columnDOM.style.width = columnWidth;
 
 			// hide column with delay to allow the animation runs entirely
-			setTimeout(() => {
-				columnDOM.classList.add("ui5-fcl-column--hidden");
-			}, FlexibleColumnLayout.ANIMATION_DURATION);
+			columnDOM.addEventListener("transitionend", this.columnResizeHandler);
 
 			return;
 		}
 
 		// show column: from 0 to 33%, from 0 to 25%, etc.
 		if (previouslyHidden) {
+			columnDOM.removeEventListener("transitionend", this.columnResizeHandler);
 			columnDOM.classList.remove("ui5-fcl-column--hidden");
 			columnDOM.style.width = columnWidth;
 		}
 	}
 
+	columnResizeHandler(event) {
+		event.target.classList.add("ui5-fcl-column--hidden");
+	}
+
 	nextLayout(layout, arrowsInfo = {}) {
 		if (arrowsInfo.start) {
 			return getNextLayoutByStartArrow()[layout];