我正在使用 VueJS 和 Vuetify。我添加了 Vuetify 的 FAB，它打開了一個 fab 串列，如
如您所見，它轉了個彎，而不僅僅是在“ ”和“x”之間切換。另一個例子：
如何使用 Vuetify 完成？
uj5u.com熱心網友回復：
將您自己的類添加/洗掉到 fab 圖示并在打開時對其進行旋轉：
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;
}
/* ?? this is what you want classes applied on the element */
.rotator {
transition: transform .3s cubic-bezier(.4, 0, .2, 1);
transform: rotate(0.125turn);
}
.is-rotated {
transform: rotate(.5turn);
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-card id="example" shaped>
<v-container>
<v-speed-dial v-model="isFabOpen" :bottom="true" :right="true" :direction="'top'" :transition="'slide-y-reverse-transition'">
<template v-slot:activator>
<v-btn
v-model="isFabOpen"
:color="isFabOpen ? 'red darken-2' : 'blue darken-2'"
dark
fab>
<!-- ?? here -->
<v-icon :class="['rotator', isFabOpen ? 'is-rotated' : '']">
mdi-close
</v-icon>
</v-btn>
</template>
<v-btn fab dark small color="green">
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-btn fab dark small color="indigo">
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-btn fab dark small color="red">
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-speed-dial>
</v-container>
</v-card>
</v-app>
</div>通過播放rotate()值來調整旋轉。由于圖示具有雙重對稱性，因此任何以 、 或 結尾的轉角.25值都適用于，而以 、.5或結尾的值適用于。.75.0x.125.375.625.875
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/435629.html