ninegrid2 6.781.0 → 6.783.0

package/dist/bundle.cjs.js

@@ -120913,14 +120913,27 @@ class nxCollapse extends HTMLElement {
 
 			// collapse 시 target 숨기고 복원 버튼 등장
 			collapseBtn.addEventListener("click", () => {
+				/**
 				this.#targetPrevDisplay = this.#target.style.display;
 				this.#target.style.display = "none";
 				this.style.display = "inline-block";
+				*/
+
+				// fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
+				this.#target.classList.add("fade-out");
+
+				setTimeout(() => {
+					this.#targetPrevDisplay = this.#target.style.display;
+					this.#target.style.display = "none";
+					this.style.display = "inline-block";
+				}, 300); // transition 시간과 맞춰서 300ms 딜레이
+
 			});
 		}
 
 		// 복원 시 target 보이고 복원 버튼 사라짐
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
+			this.#target.classList.remove("fade-out");
 			this.#target.style.display = this.#targetPrevDisplay;
 			this.style.display = "none";
 		});

package/dist/bundle.esm.js

@@ -120909,14 +120909,27 @@ class nxCollapse extends HTMLElement {
 
 			// collapse 시 target 숨기고 복원 버튼 등장
 			collapseBtn.addEventListener("click", () => {
+				/**
 				this.#targetPrevDisplay = this.#target.style.display;
 				this.#target.style.display = "none";
 				this.style.display = "inline-block";
+				*/
+
+				// fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
+				this.#target.classList.add("fade-out");
+
+				setTimeout(() => {
+					this.#targetPrevDisplay = this.#target.style.display;
+					this.#target.style.display = "none";
+					this.style.display = "inline-block";
+				}, 300); // transition 시간과 맞춰서 300ms 딜레이
+
 			});
 		}
 
 		// 복원 시 target 보이고 복원 버튼 사라짐
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
+			this.#target.classList.remove("fade-out");
 			this.#target.style.display = this.#targetPrevDisplay;
 			this.style.display = "none";
 		});

package/dist/nx/nxCollapse.js

@@ -68,14 +68,27 @@ class nxCollapse extends HTMLElement {
 
 			// collapse 시 target 숨기고 복원 버튼 등장
 			collapseBtn.addEventListener("click", () => {
+				/**
 				this.#targetPrevDisplay = this.#target.style.display;
 				this.#target.style.display = "none";
 				this.style.display = "inline-block";
+				*/
+
+				// fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
+				this.#target.classList.add("fade-out");
+
+				setTimeout(() => {
+					this.#targetPrevDisplay = this.#target.style.display;
+					this.#target.style.display = "none";
+					this.style.display = "inline-block";
+				}, 300); // transition 시간과 맞춰서 300ms 딜레이
+
 			});
 		}
 
 		// 복원 시 target 보이고 복원 버튼 사라짐
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
+			this.#target.classList.remove("fade-out");
 			this.#target.style.display = this.#targetPrevDisplay;
 			this.style.display = "none";
 		});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.781.0",
+  "version": "6.783.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/nx/nxCollapse.js

@@ -68,14 +68,27 @@ class nxCollapse extends HTMLElement {
 
 			// collapse 시 target 숨기고 복원 버튼 등장
 			collapseBtn.addEventListener("click", () => {
+				/**
 				this.#targetPrevDisplay = this.#target.style.display;
 				this.#target.style.display = "none";
 				this.style.display = "inline-block";
+				*/
+
+				// fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
+				this.#target.classList.add("fade-out");
+
+				setTimeout(() => {
+					this.#targetPrevDisplay = this.#target.style.display;
+					this.#target.style.display = "none";
+					this.style.display = "inline-block";
+				}, 300); // transition 시간과 맞춰서 300ms 딜레이
+
 			});
 		}
 
 		// 복원 시 target 보이고 복원 버튼 사라짐
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
+			this.#target.classList.remove("fade-out");
 			this.#target.style.display = this.#targetPrevDisplay;
 			this.style.display = "none";
 		});