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

Question

通过 Vuetify 的 v-icon 组件，使用主流的 material design 图标 是十分简单的，例如：

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

现在，我想知道是否支持使用动画材料图标并且可以在Vuetify中以类似的方式使用 - 如果可能的话，无需添加额外的CSS代码等。

在示例中，我注意到Font Awesome使用fa-spin，但这超出了范围。 我必须使用Google的材料图标库。

编辑：我需要的特定行为是在此处过渡部分的视频示例中：https://material.io/design/iconography/animated-icons.html# [看看当单击时如何平稳地将play按钮变成pause。]

- vahdet

---

如果你只需要添加一些预设动画，从FontAwesome中添加相应的CSS（带有动画描述）可能就足够了（尝试在演示页面上为MD图标添加fa-spin或类似的类）。但是你可能需要更多的东西——悬停动画等——即使在FA中也没有实现。 - raina77ow

嗯，我不会考虑在MD图标中使用font-awesome动画。然而，我怀疑fa-spin或任何其他font-awesome动画都无法帮助创建像这个页面中的过渡效果：https://material.io/design/iconography/animated-icons.html# 。我会将其添加到问题中以使其更清晰。 - vahdet

但是你为什么提到fa-spin呢？这是完全不同的故事；基本上适用于任何图标的简单动画。在你的情况下，每个图标应该分别制作特定的动画，对吗？ - raina77ow

Answer 1

当我想要模仿在展开面板中使用v-menu图标时chevron图标的动画效果时，我发现了这个页面。我不确定这是否完全符合您的需求，但这是我完成的方式：

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

- kelvin

Answer 2

简短回答是不行的。目前v-icon元素通过webfont渲染图标。字体无法以这种方式进行动画处理。您可以应用简单的淡入淡出、旋转、缩放和翻转动画，以实现两个图标之间的简单过渡，但是您在Material Guidelines中提到的复杂过渡需要更多的工作。

我的建议是使用内联SVG图标，这些图标可以从官方图标集以及社区驱动的图标集获得，并使用CSS动画、SMIL或JavaScript在其中进行动画处理。

- James Coyle