This repository has been archived by the owner on Aug 28, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 156
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
18fb3f4
commit e5a44e8
Showing
23 changed files
with
694 additions
and
32 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
<template> | ||
<div class="p-2 h-100"> | ||
<div class="flex"> | ||
<VbenSelect | ||
:options="options" | ||
v-model:value="value" | ||
placeholder="选择动画" | ||
:style="{ width: '150px' }" | ||
/> | ||
<VbenButton type="primary" class="ml-4" @click="start"> | ||
start | ||
</VbenButton> | ||
</div> | ||
<component :is="CustomTransition[value]"> | ||
<div class="box" v-show="show"></div> | ||
</component> | ||
</div> | ||
</template> | ||
<script lang="ts" setup> | ||
import { ref } from 'vue' | ||
import { CustomTransition } from '@vben/components/index' | ||
const options = Object.keys(CustomTransition).map((item) => { | ||
const label = item.replace('Transition', '') | ||
return { | ||
label, | ||
value: item, | ||
} | ||
}) | ||
const value = ref('FadeTransition') | ||
const show = ref(true) | ||
function start() { | ||
show.value = false | ||
setTimeout(() => { | ||
show.value = true | ||
}, 300) | ||
} | ||
</script> | ||
<style lang="less" scoped> | ||
.box { | ||
width: 150px; | ||
height: 150px; | ||
margin-top: 20px; | ||
background-color: rgb(126 170 236); | ||
} | ||
</style> |
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
72 changes: 72 additions & 0 deletions
72
packages/components/src/transition/collapse-transition.vue
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,72 @@ | ||
<template> | ||
<transition mode="out-in" v-on="on"> | ||
<slot></slot> | ||
</transition> | ||
</template> | ||
<script lang="ts" setup> | ||
import { addClass, removeClass } from '@vben/utils' | ||
defineOptions({ name: 'CollapseTransition' }) | ||
const on = { | ||
beforeEnter(el) { | ||
addClass(el, 'collapse-transition') | ||
if (!el.dataset) el.dataset = {} | ||
el.dataset.oldPaddingTop = el.style.paddingTop | ||
el.dataset.oldPaddingBottom = el.style.paddingBottom | ||
el.style.height = '0' | ||
el.style.paddingTop = 0 | ||
el.style.paddingBottom = 0 | ||
}, | ||
enter(el) { | ||
el.dataset.oldOverflow = el.style.overflow | ||
if (el.scrollHeight !== 0) { | ||
el.style.height = el.scrollHeight + 'px' | ||
el.style.paddingTop = el.dataset.oldPaddingTop | ||
el.style.paddingBottom = el.dataset.oldPaddingBottom | ||
} else { | ||
el.style.height = '' | ||
el.style.paddingTop = el.dataset.oldPaddingTop | ||
el.style.paddingBottom = el.dataset.oldPaddingBottom | ||
} | ||
el.style.overflow = 'hidden' | ||
}, | ||
afterEnter(el) { | ||
removeClass(el, 'collapse-transition') | ||
el.style.height = '' | ||
el.style.overflow = el.dataset.oldOverflow | ||
}, | ||
beforeLeave(el) { | ||
if (!el.dataset) el.dataset = {} | ||
el.dataset.oldPaddingTop = el.style.paddingTop | ||
el.dataset.oldPaddingBottom = el.style.paddingBottom | ||
el.dataset.oldOverflow = el.style.overflow | ||
el.style.height = el.scrollHeight + 'px' | ||
el.style.overflow = 'hidden' | ||
}, | ||
leave(el) { | ||
if (el.scrollHeight !== 0) { | ||
addClass(el, 'collapse-transition') | ||
el.style.height = 0 | ||
el.style.paddingTop = 0 | ||
el.style.paddingBottom = 0 | ||
} | ||
}, | ||
afterLeave(el) { | ||
removeClass(el, 'collapse-transition') | ||
el.style.height = '' | ||
el.style.overflow = el.dataset.oldOverflow | ||
el.style.paddingTop = el.dataset.oldPaddingTop | ||
el.style.paddingBottom = el.dataset.oldPaddingBottom | ||
}, | ||
} | ||
</script> |
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,82 @@ | ||
import type { PropType } from 'vue' | ||
|
||
import { defineComponent, Transition, TransitionGroup } from 'vue' | ||
import { getSlot } from '@vben/utils' | ||
|
||
type Mode = 'in-out' | 'out-in' | 'default' | undefined | ||
|
||
export function createSimpleTransition( | ||
name: string, | ||
origin = 'top center 0', | ||
mode?: Mode, | ||
) { | ||
return defineComponent({ | ||
name, | ||
props: { | ||
group: { | ||
type: Boolean as PropType<boolean>, | ||
default: false, | ||
}, | ||
mode: { | ||
type: String as PropType<Mode>, | ||
default: mode, | ||
}, | ||
origin: { | ||
type: String as PropType<string>, | ||
default: origin, | ||
}, | ||
}, | ||
setup(props, { slots, attrs }) { | ||
const onBeforeEnter = (el: Element) => { | ||
;(el as HTMLElement).style.transformOrigin = props.origin | ||
} | ||
|
||
return () => { | ||
const Tag = !props.group ? Transition : TransitionGroup | ||
return ( | ||
<Tag | ||
name={name} | ||
mode={props.mode} | ||
{...attrs} | ||
onBeforeEnter={onBeforeEnter} | ||
> | ||
{() => getSlot(slots)} | ||
</Tag> | ||
) | ||
} | ||
}, | ||
}) | ||
} | ||
export function createJavascriptTransition( | ||
name: string, | ||
functions: Recordable, | ||
mode: Mode = 'in-out', | ||
) { | ||
return defineComponent({ | ||
name, | ||
props: { | ||
mode: { | ||
type: String as PropType<Mode>, | ||
default: mode, | ||
}, | ||
}, | ||
setup(props, { attrs, slots }) { | ||
return () => { | ||
return ( | ||
<Transition | ||
name={name} | ||
mode={props.mode} | ||
{...attrs} | ||
onBeforeEnter={functions.beforeEnter} | ||
onEnter={functions.enter} | ||
onLeave={functions.leave} | ||
onAfterLeave={functions.afterLeave} | ||
onLeaveCancelled={functions.afterLeave} | ||
> | ||
{() => getSlot(slots)} | ||
</Transition> | ||
) | ||
} | ||
}, | ||
}) | ||
} |
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,91 @@ | ||
/** | ||
* Makes the first character of a string uppercase | ||
*/ | ||
export function upperFirst(str: string): string { | ||
return str.charAt(0).toUpperCase() + str.slice(1) | ||
} | ||
|
||
interface HTMLExpandElement extends HTMLElement { | ||
_parent?: (Node & ParentNode & HTMLElement) | null | ||
_initialStyle: { | ||
transition: string | ||
overflow: string | null | ||
height?: string | null | ||
width?: string | null | ||
} | ||
} | ||
|
||
export default function (expandedParentClass = '', x = false) { | ||
const sizeProperty = x ? 'width' : ('height' as 'width' | 'height') | ||
const offsetProperty = `offset${upperFirst(sizeProperty)}` as | ||
| 'offsetHeight' | ||
| 'offsetWidth' | ||
|
||
return { | ||
beforeEnter(el: HTMLExpandElement) { | ||
el._parent = el.parentNode as (Node & ParentNode & HTMLElement) | null | ||
el._initialStyle = { | ||
transition: el.style.transition, | ||
overflow: el.style.overflow, | ||
[sizeProperty]: el.style[sizeProperty], | ||
} | ||
}, | ||
|
||
enter(el: HTMLExpandElement) { | ||
const initialStyle = el._initialStyle | ||
|
||
el.style.setProperty('transition', 'none', 'important') | ||
el.style.overflow = 'hidden' | ||
// const offset = `${el[offsetProperty]}px`; | ||
|
||
// el.style[sizeProperty] = '0'; | ||
|
||
void el.offsetHeight // force reflow | ||
|
||
el.style.transition = initialStyle.transition | ||
|
||
if (expandedParentClass && el._parent) { | ||
el._parent.classList.add(expandedParentClass) | ||
} | ||
|
||
requestAnimationFrame(() => { | ||
// el.style[sizeProperty] = offset; | ||
}) | ||
}, | ||
|
||
afterEnter: resetStyles, | ||
enterCancelled: resetStyles, | ||
|
||
leave(el: HTMLExpandElement) { | ||
el._initialStyle = { | ||
transition: '', | ||
overflow: el.style.overflow, | ||
[sizeProperty]: el.style[sizeProperty], | ||
} | ||
|
||
el.style.overflow = 'hidden' | ||
el.style[sizeProperty] = `${el[offsetProperty]}px` | ||
/* eslint-disable-next-line */ | ||
void el.offsetHeight // force reflow | ||
|
||
requestAnimationFrame(() => (el.style[sizeProperty] = '0')) | ||
}, | ||
|
||
afterLeave, | ||
leaveCancelled: afterLeave, | ||
} | ||
|
||
function afterLeave(el: HTMLExpandElement) { | ||
if (expandedParentClass && el._parent) { | ||
el._parent.classList.remove(expandedParentClass) | ||
} | ||
resetStyles(el) | ||
} | ||
|
||
function resetStyles(el: HTMLExpandElement) { | ||
const size = el._initialStyle[sizeProperty] | ||
el.style.overflow = el._initialStyle.overflow! | ||
if (size != null) el.style[sizeProperty] = size | ||
Reflect.deleteProperty(el, '_initialStyle') | ||
} | ||
} |
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,51 @@ | ||
import { | ||
createSimpleTransition, | ||
createJavascriptTransition, | ||
} from './create-transition' | ||
import ExpandTransitionGenerator from './expand-transition' | ||
|
||
export const FadeTransition = createSimpleTransition('fade-transition') | ||
export const ScaleTransition = createSimpleTransition('scale-transition') | ||
export const SlideYTransition = createSimpleTransition('slide-y-transition') | ||
export const ScrollYTransition = createSimpleTransition('scroll-y-transition') | ||
export const SlideYReverseTransition = createSimpleTransition( | ||
'slide-y-reverse-transition', | ||
) | ||
export const ScrollYReverseTransition = createSimpleTransition( | ||
'scroll-y-reverse-transition', | ||
) | ||
export const SlideXTransition = createSimpleTransition('slide-x-transition') | ||
export const ScrollXTransition = createSimpleTransition('scroll-x-transition') | ||
export const SlideXReverseTransition = createSimpleTransition( | ||
'slide-x-reverse-transition', | ||
) | ||
export const ScrollXReverseTransition = createSimpleTransition( | ||
'scroll-x-reverse-transition', | ||
) | ||
export const ScaleRotateTransition = createSimpleTransition( | ||
'scale-rotate-transition', | ||
) | ||
export const ExpandXTransition = createJavascriptTransition( | ||
'expand-x-transition', | ||
ExpandTransitionGenerator('', true), | ||
) | ||
export const ExpandTransition = createJavascriptTransition( | ||
'expand-transition', | ||
ExpandTransitionGenerator(''), | ||
) | ||
|
||
export default { | ||
FadeTransition, | ||
ScaleTransition, | ||
SlideYTransition, | ||
ScrollYTransition, | ||
SlideYReverseTransition, | ||
ScrollYReverseTransition, | ||
SlideXTransition, | ||
ScrollXTransition, | ||
SlideXReverseTransition, | ||
ScrollXReverseTransition, | ||
ScaleRotateTransition, | ||
ExpandXTransition, | ||
ExpandTransition, | ||
} |
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
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 |
---|---|---|
|
@@ -70,5 +70,6 @@ export default { | |
accountCenter: 'Center', | ||
accountSetting: 'Setting', | ||
}, | ||
transition: 'Transition', | ||
}, | ||
} |
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 |
---|---|---|
|
@@ -71,5 +71,6 @@ export default { | |
accountCenter: '个人中心', | ||
accountSetting: '个人设置', | ||
}, | ||
transition: '过渡动画', | ||
}, | ||
} |
Oops, something went wrong.