Hover.cssをReact上で使って、要素をブルンブルン動かしたい！

はじめに

タイトル通り、Reactで生成した要素にホバーアクションを実装してブルンブルン動かしたくなったのでやってみました。

開発環境

VsCode
npm 6.12.1

セットアップ

Hover.cssのインストール

何パターンか方法があるらしいですが、今回はGithubからソースファイルを引っ張ってきてローカルに保存する方法でやってきます。

https://github.com/IanLunn/Hover
上記サイトのcssフォルダ配下にあるhover-min.cssをダウンロードして、ローカルの適当なフォルダに配置します。

hover-min.cssを上位のスタイルファイルでインポート

プロジェクトの上位のスタイルファイルで、保存したhover-min.cssをimportします。

@import url("hover-min.css");

classをつける

これでHover.cssを使える状態になったので、ブルンブルンさせたい要素に対してクラスをつけてあげます。

    <div className="hvr-grow">

動作確認

サーバを起動して確認してみましょう。

終わりに

楽ちんですね。