5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

React #1Advent Calendar 2017

Day 22

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

Last updated at Posted at 2017-12-21

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

使用ライブラリ

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周りも手をだせ、、たらと思います。

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?