feat(useCssVars): work with Transition + v-if

packages/runtime-core/src/components/BaseTransition.ts

@@ -67,6 +67,7 @@ export interface TransitionHooks<
  delayedLeave: () => void
  ): void
  delayedLeave?(): void
+ effects: Function[]
 }
 
 export type TransitionHookCaller = (
@@ -83,6 +84,7 @@ export interface TransitionState {
  // Track pending leave callbacks for children of the same key.
  // This is used to force remove leaving a child when a new copy is entering.
  leavingVNodes: Map<any, Record<string, VNode>>
+ effects: Function[]
 }
 
 export interface TransitionElement {
@@ -98,7 +100,8 @@ export function useTransitionState(): TransitionState {
  isMounted: false,
  isLeaving: false,
  isUnmounting: false,
- leavingVNodes: new Map()
+ leavingVNodes: new Map(),
+ effects: []
  }
  onMounted(() => {
  state.isMounted = true
@@ -317,6 +320,7 @@ export function resolveTransitionHooks(
  const hooks: TransitionHooks<TransitionElement> = {
  mode,
  persisted,
+ effects: state.effects,
  beforeEnter(el) {
  let hook = onBeforeEnter
  if (!state.isMounted) {
@@ -340,6 +344,12 @@ export function resolveTransitionHooks(
  // force early removal (not cancelled)
  leavingVNode.el!._leaveCb()
  }
+
+ state.effects.forEach(fn => {
+ fn(el)
+ })
+ state.effects = []
+
  callHook(hook, [el])
  },
 

packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts

@@ -7,7 +7,8 @@ import {
  reactive,
  nextTick,
  ComponentOptions,
- Suspense
+ Suspense,
+ Transition
 } from '@vue/runtime-dom'
 
 describe('useCssVars', () => {
@@ -163,4 +164,32 @@ describe('useCssVars', () => {
  expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
  }
  })
+
+ test('with transition + v-if', async () => {
+ const state = reactive({ color: 'red' })
+ const value = ref(true)
+ const root = document.createElement('div')
+
+ const App = {
+ setup() {
+ useCssVars(() => state)
+ return () =>
+ h(Transition, null, {
+ default: () => (value.value ? [h('div')] : [h('span')])
+ })
+ }
+ }
+
+ render(h(App), root)
+ await nextTick()
+ for (const c of [].slice.call(root.children as any)) {
+ expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
+ }
+
+ value.value = false
+ await nextTick()
+ for (const c of [].slice.call(root.children as any)) {
+ expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
+ }
+ })
 })

packages/runtime-dom/src/helpers/useCssVars.ts

@@ -47,6 +47,12 @@ function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
  vnode = vnode.component.subTree
  }
 
+ if (vnode.transition) {
+ vnode.transition.effects.push((el: Node) => {
+ setVarsOnNode(el, vars)
+ })
+ }
+
  if (vnode.shapeFlag & ShapeFlags.ELEMENT && vnode.el) {
  setVarsOnNode(vnode.el as Node, vars)
  } else if (vnode.type === Fragment) {