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

时间:2018-08-29 19:34:15

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

通过Vuetify的v-icon component,使用主流material design icons非常简单,就像:

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

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

examples中,我注意到fa-spin在Font Awesome中的用法;但这超出了范围。我已绑定到Google的材料图标库。

编辑:我需要的特定行为是在 transitions 部分的视频示例中,此处为:https://material.io/design/iconography/animated-icons.html# [请参阅play单击时,按钮变成pause,并带有平滑的动画]。

2 个答案:

答案 0 :(得分:1)

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

我的建议是使用official icon setcommunity driven icon set中的嵌入式SVG图标,并在使用CSS动画,SMIL或JavaScript的动画之间进行动画处理。

答案 1 :(得分:0)

我想在切换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>