如何在 vuetify 中使用动画材质图标答案

【问题标题】：How to use animated material icons in vuetify如何在 vuetify 中使用动画材质图标
【发布时间】：2019-02-04 16:21:56
【问题描述】：

对于 Vuetify 的 v-icon component，使用主流的 material design icons 非常简单：

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

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

在examples 中，我注意到fa-spin 用于Font Awesome；但它超出了范围。我绑定到谷歌的素材图标库。

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

【问题讨论】：

如果您只需要添加一些预设动画，添加来自 FontAwesome 的相应 CSS（带有动画描述）可能就足够了（尝试在该演示页面上将 fa-spin 或类似的类添加到 MD 图标）。但是您可能需要更多的东西 - hover 动画等 - 即使在 FA 中也没有实现。
嗯，我不会想到使用带有 MD 图标的字体真棒动画。但是，我怀疑 fa-spin 或任何其他字体真棒动画将有助于创建页面中的过渡：material.io/design/iconography/animated-icons.html#。将其添加到问题中以使其更清洁。
但是你为什么提到fa-spin呢？这是一个完全不同的故事。一个简单的动画，基本上适用于任何图标。在您的情况下，应该为每个图标分别制作特定的动画，不是吗？

标签： css animation vue.js vuetify.js google-material-icons

【解决方案1】：

当我想在 v-menu 图标内切换 expansion panels 时模仿 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>

【讨论】：

【解决方案2】：

简短的回答是否定的。 v-icon 元素当前呈现来自网络字体的图标。字体不能以这种方式进行动画处理。您可以应用简单的淡入淡出、旋转、缩放和翻转动画来实现两个图标之间的简单过渡，但是您在 Material Guidelines 中链接到的复杂过渡需要更多的工作。

我的建议是使用可从official icon set 和community driven icon set 获得的内联 SVG 图标，并在使用 CSS 动画、SMIL 或 JavaScript 的图标之间制作动画。

【讨论】：