如何在打开和关闭的晶圆厂之间添加过渡？

Question

我正在使用 VueJS 和 Vuetify。我添加了 Vuetify 的 FAB，它打开了一个 fab 列表，如 docs:

的示例所示

<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>

效果很好，但我想在打开的 fab 和关闭的 fab 之间添加一个过渡。当工厂关闭时，我们有一个“+”图标，当工厂打开时，我们有一个 'x' 图标。我想以某种方式在这两个图标之间添加一个过渡，就像它在 vue-fab:

中一样

如您所见，它转了一圈，而不仅仅是在“+”和 'x' 之间切换。另一个例子：

如何使用 Vuetify 完成？

Answer 1

Add/remove 你自己的 class 到 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/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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 或 .0 结尾的圈数的任何值都适用于 x 和以 [= 结尾的值19=]、.375、.625 或 .875 为 + 工作。

如何在打开和关闭的晶圆厂之间添加过渡？

How to add transition between opened and closed fab?

css

vue.js

floating-action-button

vuetify.js