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

* fix: transition group should work with dynamic name (#6006) * fix: improve remove class
Meituan-Dianping · Jul 5, 2017 · d8d4ca6 · d8d4ca6
1 parent 8ff77a2
commit d8d4ca6
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 3 deletions.
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)
     })