I am currently utilizing VueJS and Vuetify in my project. I have successfully implemented Vuetify's FAB component, which displays a list of fab buttons as demonstrated in the documentation:
<div id="fab-button">
<v-speed-dial v-model="fabActiveStatus" bottom left fixed direction="top" transition="slide-y-reverse-transition" style="margin: 25px">
<template v-slot:activator>
<v-btn v-model="fabActiveStatus" dark fab x-large :color="fabBgColor">
<v-icon v-if="fabActiveStatus">mdi-close</v-icon>
<v-icon v-else>mdi-plus</v-icon>
</v-btn>
</template>
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" fab dark :color="fabBgColor" @click="$emit('fl-btn-settings-popup', true)">
<v-icon>mdi-upload</v-icon>
</v-btn>
</template>
<span>add</span>
</v-tooltip>
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" fab dark :color="fabBgColor" @click="$emit('fl-btn-settings-popup', true)">
<v-icon>mdi-cloud</v-icon>
</v-btn>
</template>
<span>goto</span>
</v-tooltip>
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" fab dark :color="fabBgColor" @click="$emit('fl-btn-settings-popup', true)">
<v-icon>mdi-share-variant</v-icon>
</v-btn>
</template>
<span>share</span>
</v-tooltip>
</v-speed-dial>
</div>
While this setup functions well, I am looking to incorporate a smoother transition between opening and closing the fab buttons. I would like to achieve an animation similar to that seen in the vue-fab library:
Instead of a simple switch between the '+' and 'x' icons, I want to introduce a seamless turning motion as depicted in the examples above.
Is there a way to achieve this using Vuetify?