如何在vuetify中使用动画材料图标

Question

通过Vuetify 的v-icon组件,使用主流材料设计图标非常简单,如:

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

现在,我想知道是否支持动画素材图标,并且可以类似的方式在Vuetify中使用 - 我的意思是如果可能的话,无需添加额外的css代码行等.

在示例中,我注意到fa-spinFont Awesome 的用法; 但它超出了范围.我被绑定到Google的素材图标库.

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

Answer 1

当我想在v 菜单图标中切换扩展面板时模仿人字形图标的动画时，我找到了这个页面。我不确定这是否正是您所需要的，但这就是我所做的：

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

Answer 2

最简洁的答案是不。该v-icon元素当前呈现来自网络字体的图标。字体不能以这种方式设置动画。您可以应用简单的淡入淡出、旋转、缩放和翻转动画来实现两个图标之间的简单过渡，但在材质指南中链接到的复杂过渡需要更多的工作。

我的建议是使用内联 SVG 图标（可从官方图标集以及社区驱动的图标集获取），并在使用 CSS 动画、SMIL 或 JavaScript 的图标之间进行动画处理。