Help us understand the problem. What is going on with this article?

Reactでペラっとカードがめくれるアニメーションを実装する

More than 1 year has passed since last update.

カードをめくるアニメーションを実装したかったのですが
どう実装すればいいのか検討つかず、また時間をかけたくなかったところ
下記ライブラリを見つけました。

使用ライブラリ

react-card-flip
https://github.com/AaronCCWong/react-card-flip

動作イメージ

6d3aa9e8763f4ff73da137235d2c3195.gif

(趣味で作ったゲームです)

インストール

$ npm install react-card-flip --save

実装方法

importしてReactCardFlip内に表のときと裏の時のコンポーネントを組み込むだけ
簡単。
reactに多少でも慣れている方ならすぐに実装できるのではと思います。

上の動作イメージのカードがDeckFieldだと思っていただけると。

import ReactCardFlip from 'react-card-flip';

const DeckField = ({someState}) => (
    <ReactCardFlip isFlipped={someState.isFlipped}>
      <Card key="front">
        //<snip>
      </Card>

      <Card key="back">
        //<snip>
      </Card>
    </ReactCardFlip>
);

実際のコードでは、
onClick
-> cardをfetch
-> state更新
をredux-sagaで行っています。

来年はリッチなコンポーネントをライブラリにできるようcss周りも手をだせ、、たらと思います。

smith-30
engineer elmをやりたいと思っている
elm-jp
主に日本で活動する Elm 利用者のコミュニティです。
https://elm-lang.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away