11

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

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

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

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

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

4

2 回答 2

7

当我想在v-menu图标内切换扩展面板时模仿 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>
于 2020-05-28T15:37:21.187 回答
3

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

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

于 2019-03-26T10:13:22.057 回答