fix(VSpeedDial): fixed transition animation (#6373)

vuetifyjs · Feb 17, 2019 · 7e0a521 · 7e0a521
1 parent 797808e
commit 7e0a521
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/packages/vuetify/src/components/VSpeedDial/VSpeedDial.js b/packages/vuetify/src/components/VSpeedDial/VSpeedDial.js
@@ -63,10 +63,20 @@ export default {
     }
 
     if (this.isActive) {
+      let btnCount = 0
       children = (this.$slots.default || []).map((b, i) => {
-        b.key = i
-
-        return b
+        if (b.tag && b.componentOptions.Ctor.options.name === 'v-btn') {
+          btnCount++
+          return h('div', {
+            style: {
+              transitionDelay: btnCount * 0.05 + 's'
+            },
+            key: i
+          }, [b])
+        } else {
+          b.key = i
+          return b
+        }
       })
     }
 

diff --git a/packages/vuetify/src/stylus/components/_speed-dial.styl b/packages/vuetify/src/stylus/components/_speed-dial.styl
@@ -77,9 +77,3 @@
   display: flex
   justify-content: center
   position: absolute
-
-  .v-btn
-    for n in (1..7)
-      &:nth-child({n})
-        transition-delay: "%ss" % (n * .05)
-
diff --git a/packages/vuetify/test/unit/components/VSpeedDial/VSpeedDial.spec.js b/packages/vuetify/test/unit/components/VSpeedDial/VSpeedDial.spec.js
@@ -1,4 +1,5 @@
 import VSpeedDial from '@/components/VSpeedDial'
+import VBtn from '@/components/VBtn'
 import { test } from '@/test'
 import { compileToFunctions } from 'vue-template-compiler'
 
@@ -53,4 +54,17 @@ test('VSpeedDial.js', ({ mount }) => {
     wrapper.trigger('mouseleave')
     expect(wrapper.vm.isActive).toBe(false)
   })
+
+  it('should wrap v-btn component with div tag', () => {
+    const wrapper = mount(VSpeedDial, {
+      slots: {
+        default: [VBtn]
+      },
+      data: {
+        isActive: true
+      }
+    })
+
+    expect(wrapper.find('.v-speed-dial__list div button').length).toBe(1)
+  })
 })