web-dev-qa-db-ja.com

Vuetifyでアニメーションマテリアルアイコンを使用する方法

Vuetifyの v-icon component により、メインストリーム マテリアルデザインアイコン を使用することは、次のように非常に簡単です。

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

アニメーションマテリアルアイコン がサポートされており、Vuetifyでも同様の方法で使用できるかどうかを考えます。可能であれば、CSSコードなどの行を追加する必要はありません。

examples では、Font Awesomeでのfa-spinの使用に気づきました。それでも範囲外です。私はGoogleのマテリアルアイコンライブラリに縛られています。

EDIT:私が必要とする特定の種類の動作は、transitionsセクションのビデオの例にあります:- https://material.io/design/iconography/animated-icons.html# [クリックすると、playボタンがpauseになり、アニメーションがスムーズになります]をご覧ください。

8
vahdet

短い答えはノーです。 v-icon要素は現在、Webフォントからアイコンをレンダリングします。フォントはこの方法ではアニメーション化できません。シンプルなフェード、スピン、スケール、フリップのアニメーションを適用して、2つのアイコン間のシンプルなトランジションを実現できますが、 マテリアルガイドライン でリンクした複雑なトランジションには、さらに多くの作業が必要です。

公式アイコンセット および コミュニティ主導アイコンセット から利用できるインラインSVGアイコンを使用し、CSSアニメーション、SMIL、またはJavaScriptを使用してそれらの間でアニメーション化することをお勧めします。

4
James Coyle