Как использовать анимированные иконки материалов в Vuetify

Question

Посредством v-icon Компонент Vuetify, использующий значки дизайна основного материала, довольно прост, как:

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

Теперь мне интересно, поддерживаются ли значки анимированных материалов и могут ли они использоваться в Vuetify аналогичным образом - я имею в виду, не добавляя лишние строки кода CSS и т. Д., Если это возможно.

В примерах я заметил использование fa-spin для Font 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.