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">
動作確認
終わりに
楽ちんですね。
Author And Source
この問題について(Hover.cssをReact上で使って、要素をブルンブルン動かしたい!), 我々は、より多くの情報をここで見つけました https://qiita.com/Annoske/items/246ea007fbc30c5cd8a8著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .