fix: transition group should work with dynamic name (vuejs#6006) (vuejs#6019)

Kingwl · yyx990803 · commit d8d4ca6763af · 2017-07-05T09:17:35.000+08:00
* fix: transition group should work with dynamic name (vuejs#6006) * fix: improve remove class
diff --git a/src/platforms/web/runtime/class-util.js b/src/platforms/web/runtime/class-util.js
@@ -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')
+    }
   }
 }
diff --git a/src/platforms/web/runtime/components/transition-group.js b/src/platforms/web/runtime/components/transition-group.js
@@ -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
diff --git a/test/unit/features/transition/transition-group.spec.js b/test/unit/features/transition/transition-group.spec.js
@@ -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)
+    })
   })
 }
diff --git a/test/unit/features/transition/transition.spec.js b/test/unit/features/transition/transition.spec.js
@@ -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)
     })
 

Original file line number	Diff line number	Diff line change
`@@ -42,12 +42,20 @@ export function removeClass (el: HTMLElement, cls: ?string) {`
`42`	`42`	`} else {`
`43`	`43`	`el.classList.remove(cls)`
`44`	`44`	`}`
	`45`	`+ if (!el.classList.length) {`
	`46`	`+ el.removeAttribute('class')`
	`47`	`+ }`
`45`	`48`	`} else {`
`46`	`49`	let cur = ` ${el.getAttribute('class') \|\| ''} `
`47`	`50`	`const tar = ' ' + cls + ' '`
`48`	`51`	`while (cur.indexOf(tar) >= 0) {`
`49`	`52`	`cur = cur.replace(tar, ' ')`
`50`	`53`	`}`
`51`		`- el.setAttribute('class', cur.trim())`
	`54`	`+ cur = cur.trim()`
	`55`	`+ if (cur) {`
	`56`	`+ el.setAttribute('class', cur)`
	`57`	`+ } else {`
	`58`	`+ el.removeAttribute('class')`
	`59`	`+ }`
`52`	`60`	`}`
`53`	`61`	`}`
Original file line number	Diff line number	Diff line change
`@@ -127,7 +127,7 @@ export default {`
`127`	`127`	`if (!hasTransition) {`
`128`	`128`	`return false`
`129`	`129`	`}`
`130`		`- if (this._hasMove != null) {`
	`130`	`+ if (this._hasMove) {`
`131`	`131`	`return this._hasMove`
`132`	`132`	`}`
`133`	`133`	`// Detect whether an element with the move class applied has`