css - 如何在vuetify中使用动画素材图标

Question

通过v-icon component Vuetify，使用主流 material design icons非常简单，例如:

<v-icon>home</v-icon>

现在，我想知道 animated material icons受支持并且可以以类似的方式在 Vuetify 中使用 - 我的意思是如果可能的话无需添加额外的 css 代码行等。

在examples ，我注意到 Font Awesome 使用 fa-spin；但它超出了范围。我绑定(bind)到 Google 的素材图标库。

编辑:我需要的特定行为类型在此处转换部分的视频示例中:https://material.io/design/iconography/animated-icons.html# [查看 play 按钮如何在单击时变成带有流畅动画的pause]。

Answer 1

当我想在切换 expansion panels 时模仿人字形图标的动画时，我找到了这个页面。在 v-menu 内图标。我不确定这是否正是您所需要的，但我是这样做的:

<template>
  <v-menu offset-y v-model="menuValue">
    <template v-slot:activator="{ on }">
      <v-btn v-on="on" :class="{active: menuValue}">
        <v-icon>mdi-chevron-down</v-icon>
      </v-btn>
    </template>
  </v-menu>
</template>

<script>
  export default {
    data() {
      return {
        menuValue: null
      };
    }
  };
</script>

<style lang="scss" scoped>
  .v-btn.active .v-icon {
    transform: rotate(-180deg);
  }
</style>