fix(ui5-dialog): fix unwanted animation when opening with large content (#13121)

* fix(ui5-dialog): fix unwanted animation when opening with large content

* chore: fix indentation

* chore: add the example from the issue

* chore: resolve merge conflicts

* chore: fix image src

Author: TeodorTaushanov

packages/main/src/Popup.ts

@@ -369,6 +369,11 @@ abstract class Popup extends UI5Element {
 
 		this._addOpenedPopup();
 
+		this.classList.add("ui5-popup-opening");
+		setTimeout(() => {
+			this.classList.remove("ui5-popup-opening");
+		}, 50);
+
 		this.open = true;
 
 		// initial focus, if focused element is statically created

packages/main/src/themes/Popup.css

@@ -9,4 +9,8 @@
 
 :host(:focus-visible) {
     outline: none;
+}
+
+:host(.ui5-popup-opening) {
+    opacity: 0.1;
 }

packages/main/test/pages/Dialog.html

@@ -98,6 +98,11 @@
 		<br>
 		<br>
 		<ui5-button id="native-dnd-open">Open draggable dialog with native DnD</ui5-button>
+		<br>
+		<br>
+		<ui5-button id="open-big-dynamic-content">Open dynamic dialog with big content</ui5-button>
+		<br>
+		<br>
 	</div>
 	<ui5-block-layer></ui5-block-layer>
 
@@ -1159,6 +1164,72 @@
 			const data = e.dataTransfer.getData("text");
 			dropZone.textContent = `Dropped: ${data}`;
 		});
+
+		document.getElementById("open-big-dynamic-content").addEventListener("click", function () {
+			const dialog = document.createElement("ui5-dialog");
+			const child1 = `
+				<div slot="header" design="Header">
+					<h3>Random Title</h3>
+				</div>
+			`;
+
+			const child2 = `
+				<div>
+					<div>
+						<div>
+							<div>
+								<div>
+									<img width="60" height="60" src="./img/man_avatar_1.png">
+								</div>
+							</div>
+							<div>
+								<div>Contact RANDOM CORP</div>
+								<div>Some subtitle</div>
+							</div>
+						</div>
+					</div>
+					<form>
+						<div>
+							<div>
+								<p>Subscribe to our newsletter</p>
+								<small>No spam, only updates.</small>
+							</div>
+						</div>
+						<div>
+							<small>Hint: Use a valid code</small>
+						</div>
+						<div>Your Info</div>
+						<div>
+							<div>
+							</div>
+							<div>
+							</div>
+						</div>
+						<div>Company Info</div>
+						<div>
+							<div>
+							</div>
+							<div>
+							</div>
+						</div>
+						<div></div>
+						<div>
+							<div>
+								<span>
+									I agree to the random terms and conditions.
+										Read Privacy Policy.
+								</span>
+							</div>
+						</div>
+						<div></div>
+					</form>
+				</div>
+			`;
+
+			dialog.innerHTML = child1 + child2;
+			document.body.appendChild(dialog);
+			dialog.open = true;
+		});
 	</script>
 </body>