-
-
Notifications
You must be signed in to change notification settings - Fork 163
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: 修复
f-collapse-animation 组件初始展开关闭时动画失效的问题
- Loading branch information
Showing
5 changed files
with
144 additions
and
181 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
packages/fighting-design/_hooks/use-collapse-animation/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| import { computed } from 'vue' | ||
| import { isNumber } from '../../_utils' | ||
| import { useRun } from '..' | ||
| import type { CollapseAnimationProps } from '../../collapse-animation' | ||
|
|
||
| export interface UseCollapseAnimationReturn { | ||
| after: (el: Element) => void | ||
| before: (el: Element) => void | ||
| ing: (el: Element) => void | ||
| } | ||
|
|
||
| const { run } = useRun() | ||
|
|
||
| export const useCollapseAnimation = (prop: CollapseAnimationProps): UseCollapseAnimationReturn => { | ||
| /** 动画样式 */ | ||
| const transitionStyle = computed((): string => { | ||
| if (isNumber(prop.animationTime)) { | ||
| return `${prop.animationTime}s all ease-in-out` | ||
| } | ||
| return '0.747s all ease-in-out' | ||
| }) | ||
|
|
||
| /** | ||
| * 在动画开始之前，加点样式 | ||
| * | ||
| * @param { Object } el 元素节点 | ||
| */ | ||
| const before = (el: Element): void => { | ||
| const node = el as HTMLElement | ||
|
|
||
| node.style.transition = transitionStyle.value | ||
| node.style.width = 'auto' | ||
|
|
||
| if (prop.opened) { | ||
| node.style.height = '0' | ||
|
|
||
| run(prop.onOpen, el) | ||
|
|
||
| } else { | ||
| node.style.height = node.scrollHeight + 'px' | ||
|
|
||
| if (prop.widthAnimation) { | ||
| /** 获取父节点 */ | ||
| const parent = node.parentElement as HTMLElement | ||
| /** | ||
| * 获取父节点的宽度 | ||
| * | ||
| * @see HTMLElement.offsetWidth https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth | ||
| * @see Element.clientWidth https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientWidth | ||
| */ | ||
| const parentWidth: number = parent.offsetWidth || parent.clientWidth | ||
|
|
||
| node.style.width = `${parentWidth}px` | ||
| } | ||
|
|
||
| run(prop.onClose, el) | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * 在打开和关闭完成之后，移除样式 | ||
| * | ||
| * @param { Object } el 元素节点 | ||
| */ | ||
| const after = (el: Element): void => { | ||
| const node = el as HTMLElement | ||
|
|
||
| node.style.transition = '' | ||
| node.style.height = '' | ||
| node.style.width = '' | ||
|
|
||
| if (prop.opened) { | ||
| run(prop.onOpenEnd, el) | ||
|
|
||
| } else { | ||
| run(prop.onCloseEnd, el) | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * 运动过程中干点事儿 | ||
| * | ||
| * @param { Object } el 元素节点 | ||
| */ | ||
| const ing = (el: Element): void => { | ||
| const node = el as HTMLElement | ||
|
|
||
| node.style.overflow = 'hidden' | ||
|
|
||
| if (prop.opened) { | ||
| /** 开启执行 */ | ||
| node.style.height = node.scrollHeight + 'px' | ||
|
|
||
| /** 如果需要宽度过度 */ | ||
| if (prop.widthAnimation) { | ||
| node.style.width = '0' | ||
|
|
||
| /** 获取父节点 */ | ||
| const parent = node.parentElement as HTMLElement | ||
| /** | ||
| * 获取父节点的宽度 | ||
| * | ||
| * @see HTMLElement.offsetWidth https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth | ||
| * @see Element.clientWidth https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientWidth | ||
| */ | ||
| const parentWidth: number = parent.offsetWidth || parent.clientWidth | ||
|
|
||
| /** 如果两个方法都没有获取到宽度，使用 auto */ | ||
| node.style.width = isNumber(parentWidth) ? `${parentWidth}px` : 'auto' | ||
| } | ||
| } else { | ||
| /** 关闭执行 */ | ||
| node.style.height = '0' | ||
|
|
||
| if (prop.widthAnimation) { | ||
| node.style.width = '0' | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| after, | ||
| before, | ||
| ing | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,3 @@ | ||
| <script lang="ts" setup> | ||
| import { ref } from 'vue' | ||
| <script lang="ts" setup></script> | ||
|
|
||
| const isOpen = ref(false) | ||
| </script> | ||
|
|
||
| <template> | ||
| <f-switch v-model="isOpen" /> | ||
|
|
||
| <f-collapse-animation :opened="isOpen"> | ||
| <p>11111</p> | ||
| <p>11111</p> | ||
| <p>11111</p> | ||
| <p>11111</p> | ||
| <p>11111</p> | ||
| <p>11111</p> | ||
| <p>11111</p> | ||
| <p>11111</p> | ||
| <p>11111</p> | ||
| <p>11111</p> | ||
| <p>222222</p> | ||
| </f-collapse-animation> | ||
| </template> | ||
| <template></template> |