theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: transition class compat

Browse Source
This commit is contained in:
Evan You 2021-04-06 15:02:15 -04:00
parent 926e12862b
commit 9828ef0845
1 changed files with 44 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/runtime-dom/src/components/Transition.ts
View File

@ -72,10 +72,20 @@ export const TransitionPropsValidators = (Transition.props = /*#__PURE__*/ exten
export function resolveTransitionProps(
rawProps: TransitionProps
): BaseTransitionProps<Element> {
let {
const baseProps: BaseTransitionProps<Element> = {}
for (const key in rawProps) {
if (!(key in DOMTransitionPropsValidators)) {
;(baseProps as any)[key] = (rawProps as any)[key]
}
}
if (rawProps.css === false) {
return baseProps
}
const {
name = 'v',
type,
css = true,
duration,
enterFromClass = `${name}-enter-from`,
enterActiveClass = `${name}-enter-active`,
@ -88,15 +98,21 @@ export function resolveTransitionProps(
leaveToClass = `${name}-leave-to`
} = rawProps
const baseProps: BaseTransitionProps<Element> = {}
for (const key in rawProps) {
if (!(key in DOMTransitionPropsValidators)) {
;(baseProps as any)[key] = (rawProps as any)[key]
// legacy transition class compat
let legacyEnterFromClass: string
let legacyAppearFromClass: string
let legacyLeaveFromClass: string
if (__COMPAT__) {
const toLegacyClass = (cls: string) => cls.replace(/-from$/, '')
if (!rawProps.enterFromClass) {
legacyEnterFromClass = toLegacyClass(enterFromClass)
}
if (!rawProps.appearFromClass) {
legacyAppearFromClass = toLegacyClass(appearFromClass)
}
if (!rawProps.leaveFromClass) {
legacyLeaveFromClass = toLegacyClass(leaveFromClass)
}
}
if (!css) {
return baseProps
}
const durations = normalizeDuration(duration)
@ -132,6 +148,12 @@ export function resolveTransitionProps(
hook && hook(el, resolve)
nextFrame(() => {
removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass)
if (__COMPAT__) {
removeTransitionClass(
el,
isAppear ? legacyAppearFromClass : legacyEnterFromClass
)
}
addTransitionClass(el, isAppear ? appearToClass : enterToClass)
if (!(hook && hook.length > 1)) {
whenTransitionEnds(el, type, enterDuration, resolve)
@ -144,11 +166,17 @@ export function resolveTransitionProps(
onBeforeEnter(el) {
onBeforeEnter && onBeforeEnter(el)
addTransitionClass(el, enterFromClass)
if (__COMPAT__) {
addTransitionClass(el, legacyEnterFromClass)
}
addTransitionClass(el, enterActiveClass)
},
onBeforeAppear(el) {
onBeforeAppear && onBeforeAppear(el)
addTransitionClass(el, appearFromClass)
if (__COMPAT__) {
addTransitionClass(el, legacyAppearFromClass)
}
addTransitionClass(el, appearActiveClass)
},
onEnter: makeEnterHook(false),
@ -156,11 +184,17 @@ export function resolveTransitionProps(
onLeave(el, done) {
const resolve = () => finishLeave(el, done)
addTransitionClass(el, leaveFromClass)
if (__COMPAT__) {
addTransitionClass(el, legacyLeaveFromClass)
}
// force reflow so *-leave-from classes immediately take effect (#2593)
forceReflow()
addTransitionClass(el, leaveActiveClass)
nextFrame(() => {
removeTransitionClass(el, leaveFromClass)
if (__COMPAT__) {
removeTransitionClass(el, legacyLeaveFromClass)
}
addTransitionClass(el, leaveToClass)
if (!(onLeave && onLeave.length > 1)) {
whenTransitionEnds(el, type, leaveDuration, resolve)