Как использовать анимированные иконки материалов в Vuetify - PullRequest
Новая
       19

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

0 голосов
/ 29 августа 2018

По 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 с плавной анимацией при нажатии].

1 Ответ

0 голосов
/ 26 марта 2019

Короткий ответ - нет. Элемент v-icon в настоящее время отображает значки из веб-шрифта. Шрифты не могут быть анимированы таким образом. Вы можете применять простые анимации постепенного изменения, вращения, масштабирования и отражения для достижения простого перехода между двумя значками, но сложные переходы, на которые вы ссылались в Рекомендации по материалам , требуют гораздо больше работы.

Я рекомендую использовать встроенные значки SVG, доступные в официальном наборе , а также в наборе , управляемом сообществом, и анимировать между теми, кто использует CSS-анимацию, SMIL или JavaScript.

...