Skip to content

Commit

Permalink
fix(transition): handle transition for v-if branches with comment
Browse files Browse the repository at this point in the history
fix #5675
  • Loading branch information
yyx990803 committed Apr 14, 2022
1 parent 767d212 commit 62eba63
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 9 deletions.
27 changes: 19 additions & 8 deletions packages/runtime-core/src/components/BaseTransition.ts
Original file line number Diff line number Diff line change
Expand Up @@ -148,12 +148,25 @@ const BaseTransitionImpl: ComponentOptions = {
return
}

// warn multiple elements
if (__DEV__ && children.length > 1) {
warn(
'<transition> can only be used on a single element or component. Use ' +
'<transition-group> for lists.'
)
let child: VNode = children[0]
if (children.length > 1) {
let hasFound = false
// locate first non-comment child
for (const c of children) {
if (c.type !== Comment) {
if (__DEV__ && hasFound) {
// warn more than one non-comment child
warn(
'<transition> can only be used on a single element or component. ' +
'Use <transition-group> for lists.'
)
break
}
child = c
hasFound = true
if (!__DEV__) break
}
}
}

// there's no need to track reactivity for these props so use the raw
Expand All @@ -171,8 +184,6 @@ const BaseTransitionImpl: ComponentOptions = {
warn(`invalid <transition> mode: ${mode}`)
}

// at this point children has a guaranteed length of 1.
const child = children[0]
if (state.isLeaving) {
return emptyPlaceholder(child)
}
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/__tests__/Transition.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2039,7 +2039,7 @@ describe('e2e: Transition', () => {
template: `
<div id="container">
<transition>
<Comp class="test" v-if="toggle">
<Comp class="test" v-if="toggle">
<div>content</div>
</Comp>
</transition>
Expand Down

0 comments on commit 62eba63

Please sign in to comment.