Skip to content

Commit

Permalink
fix: transition group should work with dynamic name (#6006) (#6019)
Browse files Browse the repository at this point in the history
* fix: transition group should work with dynamic name (#6006)

* fix: improve remove class
  • Loading branch information
Kingwl authored and yyx990803 committed Jul 5, 2017
1 parent 8ff77a2 commit d8d4ca6
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 3 deletions.
10 changes: 9 additions & 1 deletion src/platforms/web/runtime/class-util.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,20 @@ export function removeClass (el: HTMLElement, cls: ?string) {
} else {
el.classList.remove(cls)
}
if (!el.classList.length) {
el.removeAttribute('class')
}
} else {
let cur = ` ${el.getAttribute('class') || ''} `
const tar = ' ' + cls + ' '
while (cur.indexOf(tar) >= 0) {
cur = cur.replace(tar, ' ')
}
el.setAttribute('class', cur.trim())
cur = cur.trim()
if (cur) {
el.setAttribute('class', cur)
} else {
el.removeAttribute('class')
}
}
}
2 changes: 1 addition & 1 deletion src/platforms/web/runtime/components/transition-group.js
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ export default {
if (!hasTransition) {
return false
}
if (this._hasMove != null) {
if (this._hasMove) {
return this._hasMove
}
// Detect whether an element with the move class applied has
Expand Down
47 changes: 47 additions & 0 deletions test/unit/features/transition/transition-group.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -293,5 +293,52 @@ if (!isIE9) {
}).$mount()
expect('<transition-group> children must be keyed: <div>').toHaveBeenWarned()
})

// Github issue #6006
it('should work with dynamic name', done => {
const vm = new Vue({
template: `
<div>
<transition-group :name="name">
<div v-for="item in items" :key="item">{{ item }}</div>
</transition-group>
</div>
`,
data: {
items: ['a', 'b', 'c'],
name: 'group'
}
}).$mount(el)

vm.name = 'invalid-name'
vm.items = ['b', 'c', 'a']
waitForUpdate(() => {
expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
`<span>` +
`<div>b</div>` +
`<div>c</div>` +
`<div>a</div>` +
`</span>`
)
vm.name = 'group'
vm.items = ['a', 'b', 'c']
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
`<span>` +
`<div class="group-move">a</div>` +
`<div class="group-move">b</div>` +
`<div class="group-move">c</div>` +
`</span>`
)
}).thenWaitFor(duration * 2 + buffer).then(() => {
expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
`<span>` +
`<div>a</div>` +
`<div>b</div>` +
`<div>c</div>` +
`</span>`
)
}).then(done)
})
})
}
2 changes: 1 addition & 1 deletion test/unit/features/transition/transition.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@ if (!isIE9) {
expect(enterSpy).toHaveBeenCalled()
expect(vm.$el.innerHTML).toBe('<div class="nope-enter nope-enter-active">foo</div>')
}).thenWaitFor(nextFrame).then(() => {
expect(vm.$el.innerHTML).toMatch(/<div( class="")?>foo<\/div>/)
expect(vm.$el.innerHTML).toBe('<div>foo</div>')
}).then(done)
})

Expand Down

0 comments on commit d8d4ca6

Please sign in to comment.