Fix expand transition (#234)

- fix expand transition - fix a format issue 修复了垂直展开的动画
GlobeMC · Feb 23, 2024 · d1b5423 · d1b5423
2 parents 1f5d749 + 5beb018
commit d1b5423
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/docs/.vitepress/theme/components/Analyzer.vue b/docs/.vitepress/theme/components/Analyzer.vue
@@ -308,7 +308,7 @@ async function startAnalysis(files: File[]): Promise<boolean> {
   showAnalysisResult(
     "Unrecord",
     "本工具还未收录您所遇到的错误，请点击下方按钮前往 GitHub 反馈。",
-    "https://github.com/GlobeMC/crashmc.com/issues/new/choose",
+    "/contribute/crash-report",
     "Unrecord",
   )
   return false

diff --git a/docs/.vitepress/theme/components/TransitionExpand.vue b/docs/.vitepress/theme/components/TransitionExpand.vue
@@ -10,14 +10,14 @@ const props = withDefaults(
 
 const prefix = props.name
 
-function waitForAnimationFrame() {
+function waitForAnimationFrame(): Promise<number> {
   return new Promise((re) => requestAnimationFrame(re))
 }
 
 async function onenter(ele: Element) {
   const elem = ele as HTMLElement
 
-  elem.style.maxHeight = "unset"
+  elem.setAttribute("style", "max-height: unset !important")
   const width = window.getComputedStyle(elem).width
   elem.style.width = width
   elem.style.position = "absolute"
@@ -29,7 +29,7 @@ async function onenter(ele: Element) {
   elem.style.removeProperty("position")
   elem.style.removeProperty("visibility")
   elem.style.removeProperty("height")
-  elem.style.removeProperty("maxHeight")
+  elem.style.removeProperty("max-height")
   elem.style.setProperty("--expanded-height", height)
 
   elem.classList.add(prefix + "-enter-from")
@@ -85,11 +85,11 @@ function onafter(ele: Element) {
 
 .expand-enter-from,
 .expand-leave-to {
-  max-height: 0;
+  max-height: 0 !important;
 }
 
 .expand-enter-to,
 .expand-leave-from {
-  max-height: var(--expanded-height);
+  max-height: var(--expanded-height) !important;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/TransitionExpandGroup.vue b/docs/.vitepress/theme/components/TransitionExpandGroup.vue
@@ -12,14 +12,14 @@ const props = withDefaults(
 
 const prefix = props.name
 
-function waitForAnimationFrame() {
+function waitForAnimationFrame(): Promise<number> {
   return new Promise((re) => requestAnimationFrame(re))
 }
 
 async function onenter(ele: Element) {
   const elem = ele as HTMLElement
 
-  elem.style.maxHeight = "unset"
+  elem.setAttribute("style", "max-height: unset !important")
   const width = window.getComputedStyle(elem).width
   elem.style.width = width
   elem.style.position = "absolute"
@@ -31,7 +31,7 @@ async function onenter(ele: Element) {
   elem.style.removeProperty("position")
   elem.style.removeProperty("visibility")
   elem.style.removeProperty("height")
-  elem.style.removeProperty("maxHeight")
+  elem.style.removeProperty("max-height")
   elem.style.setProperty("--expanded-height", height)
 
   elem.classList.add(prefix + "-enter-from")
@@ -90,11 +90,11 @@ function onafter(ele: Element) {
 
 .transition-expand-group > .expand-enter-from,
 .transition-expand-group > .expand-leave-to {
-  max-height: 0;
+  max-height: 0 !important;
 }
 
 .transition-expand-group > .expand-enter-to,
 .transition-expand-group > .expand-leave-from {
-  max-height: var(--expanded-height);
+  max-height: var(--expanded-height) !important;
 }
 </style>