React Simple Animate をお試しする

React Simple Animate というのがあると知り、早速導入してみました。

• React Simple Animate - UI Animation made simple
• bluebill1049/react-simple-animate: React UI animation made easy

React において、コンポーネントのアニメーションは気軽に導入というわけにはいかず、一手間かかります。CSS の定義も必要となります。React Simple Animate を使うと、簡単に設定することでコンポーネント単位のアニメーションを導入できます。

単純な定義だと、以下のように、Animate コンポーネントを使用し、アニメーションの開始と終了を start と stop にて定義することが出来ます。

        <Animate
          play={this.state.play}
          start={{ opacity: 1, filter: 'blur(0)' }}
          end={{ opacity: 0, filter: 'blur(10px)' }}
        >
          <div>
            <img src="/static/img/ogp_default.png" style={{width: "500px", height:"261"}}/>
          </div>
        </Animate>

実際に作ってみたサンプルです。MDX でこのドキュメントを書いているので、文中にコンポーネントを挿入できます。MDX について興味があることはこちら。

• 全面的に MDX に移行しました - ARTICLES

ボタンを押すとアニメーションが始まるのがわかると思います。

HIDE

完全なソースは以下です。まあ、こんな感じで使えるっていうのがわかればと。

export class AnimationSample extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      play: false
    }
  }
  //
  onClick() {
        this.setState({
            play: !this.state.play
        });
  }
  //
  render() {
    return(
      <div>
        <Animate
          play={this.state.play}
          start={{ opacity: 1, filter: 'blur(0)' }}
          end={{ opacity: 0, filter: 'blur(10px)' }}
        >
          <div>
            <img src="/static/img/ogp_default.png" style={{width: "500px", height:"261"}}/>
          </div>
        </Animate>
        <button className="button is-link" onClick={this.onClick.bind(this)}>{
          this.state.play
          ? <p><i class="fas fa-eye"></i> SHOW</p>
          : <p><i class="fas fa-eye-slash"></i> HIDE</p>
        }</button>
      </div>
    )
  }
}

導入は簡単で、npm にてインストール出来ます。

npm i react-simple-animate

使うときは import をしましょう。

import { Animate }  from 'react-simple-animate'

しばらく使ってみて、問題がなさそうなら次期リニューアルに導入してみようと思います。