How to add transition between opened and closed fab?-CodePudding

I'm using VueJS and Vuetify. I have added the Vuetify's FAB which opens a list of fabs as shown in the example of the

As you can see it makes a turn and not just switch between ' ' and 'x'. Another example:

How it can be done using Vuetify?

CodePudding user response：

Add/remove your own class to the fab icon and give it a spin when open:

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    isFabOpen: false,
  })
})

#example {
  width: calc(100vw - 6rem);
  height: calc(100vh - 6rem);
  margin: 3rem;
}

div.theme--light.v-application {
  background-color: #f4f6f8;
}

#app .v-speed-dial {
  position: absolute;
}

#app .v-btn--floating {
  position: relative;
}


/*