Skip to content
Permalink
Browse files
fix(transition): handle transition for v-if branches with comment
fix #5675
  • Loading branch information
yyx990803 committed Apr 14, 2022
1 parent 767d212 commit 62eba63172414ae0aa895d4b1927c7889c398f2f
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 9 deletions.
@@ -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
@@ -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)
}
@@ -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>

0 comments on commit 62eba63

Please sign in to comment.