wip: transition class compat

packages/runtime-dom/src/components/Transition.ts

@@ -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> = {}
+  // legacy transition class compat
-  for (const key in rawProps) {
+  let legacyEnterFromClass: string
-    if (!(key in DOMTransitionPropsValidators)) {
+  let legacyAppearFromClass: string
-      ;(baseProps as any)[key] = (rawProps as any)[key]
+  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)