ninegrid2 6.795.0 → 6.797.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/bundle.cjs.js +10 -7
  2. package/dist/bundle.esm.js +10 -7
  3. package/dist/nx/nxCollapse.js +10 -7
  4. package/package.json +1 -1
  5. package/src/nx/nxCollapse.js +10 -7
package/dist/bundle.cjs.js CHANGED
@@ -120934,17 +120934,20 @@ class nxCollapse extends HTMLElement {
120934
120934
  // collapse 시 target 숨기고 복원 버튼 등장
120935
120935
  collapseBtn.addEventListener("click", () => {
120936
120936
  // fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
120937
- this.#target.classList.add("shrinking");
120937
+ // STEP 1: 복원 버튼 애니메이션 시작 (살짝 빠르게 먼저 등장)
120938
+ this.style.display = "inline-block";
120939
+ this.classList.add("shrinking");
120938
120940
 
120939
120941
  setTimeout(() => {
120940
- this.#targetPrevDisplay = this.#target.style.display;
120941
- this.#target.style.display = "none";
120942
- this.style.display = "inline-block";
120943
- }, 500); // transition 시간과 맞춰서 300ms 딜레이
120942
+ // STEP 2: target이 줄어드는 shrinking 애니메이션 시작
120943
+ this.#target.classList.add("appearing");
120944
+ }, 300); // appearing 시작 후 100ms 딜레이로 target 축소 시작
120944
120945
 
120945
120946
  setTimeout(() => {
120946
- this.classList.add("appearing");
120947
- }, 100); // transition 시간과 맞춰서 300ms 딜레이
120947
+ // STEP 3: 실제 target 숨기기
120948
+ this.#targetPrevDisplay = this.#target.style.display;
120949
+ this.#target.style.display = "none";
120950
+ }, 800); // shrinking 애니메이션이 끝나고 실제 제거
120948
120951
  });
120949
120952
  }
120950
120953
 
package/dist/bundle.esm.js CHANGED
@@ -120930,17 +120930,20 @@ class nxCollapse extends HTMLElement {
120930
120930
  // collapse 시 target 숨기고 복원 버튼 등장
120931
120931
  collapseBtn.addEventListener("click", () => {
120932
120932
  // fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
120933
- this.#target.classList.add("shrinking");
120933
+ // STEP 1: 복원 버튼 애니메이션 시작 (살짝 빠르게 먼저 등장)
120934
+ this.style.display = "inline-block";
120935
+ this.classList.add("shrinking");
120934
120936
 
120935
120937
  setTimeout(() => {
120936
- this.#targetPrevDisplay = this.#target.style.display;
120937
- this.#target.style.display = "none";
120938
- this.style.display = "inline-block";
120939
- }, 500); // transition 시간과 맞춰서 300ms 딜레이
120938
+ // STEP 2: target이 줄어드는 shrinking 애니메이션 시작
120939
+ this.#target.classList.add("appearing");
120940
+ }, 300); // appearing 시작 후 100ms 딜레이로 target 축소 시작
120940
120941
 
120941
120942
  setTimeout(() => {
120942
- this.classList.add("appearing");
120943
- }, 100); // transition 시간과 맞춰서 300ms 딜레이
120943
+ // STEP 3: 실제 target 숨기기
120944
+ this.#targetPrevDisplay = this.#target.style.display;
120945
+ this.#target.style.display = "none";
120946
+ }, 800); // shrinking 애니메이션이 끝나고 실제 제거
120944
120947
  });
120945
120948
  }
120946
120949
 
package/dist/nx/nxCollapse.js CHANGED
@@ -89,17 +89,20 @@ class nxCollapse extends HTMLElement {
89
89
  // collapse 시 target 숨기고 복원 버튼 등장
90
90
  collapseBtn.addEventListener("click", () => {
91
91
  // fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
92
- this.#target.classList.add("shrinking");
92
+ // STEP 1: 복원 버튼 애니메이션 시작 (살짝 빠르게 먼저 등장)
93
+ this.style.display = "inline-block";
94
+ this.classList.add("shrinking");
93
95
 
94
96
  setTimeout(() => {
95
- this.#targetPrevDisplay = this.#target.style.display;
96
- this.#target.style.display = "none";
97
- this.style.display = "inline-block";
98
- }, 500); // transition 시간과 맞춰서 300ms 딜레이
97
+ // STEP 2: target이 줄어드는 shrinking 애니메이션 시작
98
+ this.#target.classList.add("appearing");
99
+ }, 300); // appearing 시작 후 100ms 딜레이로 target 축소 시작
99
100
 
100
101
  setTimeout(() => {
101
- this.classList.add("appearing");
102
- }, 100); // transition 시간과 맞춰서 300ms 딜레이
102
+ // STEP 3: 실제 target 숨기기
103
+ this.#targetPrevDisplay = this.#target.style.display;
104
+ this.#target.style.display = "none";
105
+ }, 800); // shrinking 애니메이션이 끝나고 실제 제거
103
106
  });
104
107
  }
105
108
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.795.0",
4
+ "version": "6.797.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxCollapse.js CHANGED
@@ -89,17 +89,20 @@ class nxCollapse extends HTMLElement {
89
89
  // collapse 시 target 숨기고 복원 버튼 등장
90
90
  collapseBtn.addEventListener("click", () => {
91
91
  // fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
92
- this.#target.classList.add("shrinking");
92
+ // STEP 1: 복원 버튼 애니메이션 시작 (살짝 빠르게 먼저 등장)
93
+ this.style.display = "inline-block";
94
+ this.classList.add("shrinking");
93
95
 
94
96
  setTimeout(() => {
95
- this.#targetPrevDisplay = this.#target.style.display;
96
- this.#target.style.display = "none";
97
- this.style.display = "inline-block";
98
- }, 500); // transition 시간과 맞춰서 300ms 딜레이
97
+ // STEP 2: target이 줄어드는 shrinking 애니메이션 시작
98
+ this.#target.classList.add("appearing");
99
+ }, 300); // appearing 시작 후 100ms 딜레이로 target 축소 시작
99
100
 
100
101
  setTimeout(() => {
101
- this.classList.add("appearing");
102
- }, 100); // transition 시간과 맞춰서 300ms 딜레이
102
+ // STEP 3: 실제 target 숨기기
103
+ this.#targetPrevDisplay = this.#target.style.display;
104
+ this.#target.style.display = "none";
105
+ }, 800); // shrinking 애니메이션이 끝나고 실제 제거
103
106
  });
104
107
  }
105
108