Skip to content

Commit dfc25f2

Browse files
author
kingwl
committed
fix: transition group should work with dynamic name (vuejs#6006)
1 parent 8ff77a2 commit dfc25f2

File tree

2 files changed

+48
-1
lines changed

2 files changed

+48
-1
lines changed

src/platforms/web/runtime/components/transition-group.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export default {
127127
if (!hasTransition) {
128128
return false
129129
}
130-
if (this._hasMove != null) {
130+
if (this._hasMove) {
131131
return this._hasMove
132132
}
133133
// Detect whether an element with the move class applied has

test/unit/features/transition/transition-group.spec.js

+47
Original file line numberDiff line numberDiff line change
@@ -293,5 +293,52 @@ if (!isIE9) {
293293
}).$mount()
294294
expect('<transition-group> children must be keyed: <div>').toHaveBeenWarned()
295295
})
296+
297+
// Github issue #6006
298+
it('should work with dynamic name', done => {
299+
const vm = new Vue({
300+
template: `
301+
<div>
302+
<transition-group :name="name">
303+
<div v-for="item in items" :key="item">{{ item }}</div>
304+
</transition-group>
305+
</div>
306+
`,
307+
data: {
308+
items: ['a', 'b', 'c'],
309+
name: 'group'
310+
}
311+
}).$mount(el)
312+
313+
vm.name = 'invalid-name'
314+
vm.items = ['b', 'c', 'a']
315+
waitForUpdate(() => {
316+
expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
317+
`<span>` +
318+
`<div>b</div>` +
319+
`<div>c</div>` +
320+
`<div>a</div>` +
321+
`</span>`
322+
)
323+
vm.name = 'group'
324+
vm.items = ['a', 'b', 'c']
325+
}).thenWaitFor(nextFrame).then(() => {
326+
expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
327+
`<span>` +
328+
`<div class="group-move">a</div>` +
329+
`<div class="group-move">b</div>` +
330+
`<div class="group-move">c</div>` +
331+
`</span>`
332+
)
333+
}).thenWaitFor(duration * 2 + buffer).then(() => {
334+
expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
335+
`<span>` +
336+
`<div class="">a</div>` +
337+
`<div class="">b</div>` +
338+
`<div class="">c</div>` +
339+
`</span>`
340+
)
341+
}).then(done)
342+
})
296343
})
297344
}

0 commit comments

Comments
 (0)