React에 카드를 쉽게 뒤집을 수 있는 애니메이션 설치

2605 단어 React
카드 뒤집기 애니메이션을 설치하고 싶습니다.
어떻게 실행해야 좋을지 모르겠고, 또 시간을 들이고 싶지 않은 곳.
다음 프로그램 라이브러리를 찾았습니다.

라이브러리 작업


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

동작 이미지



(이것은 취미로 만든 게임이다)

설치하다.

$ npm install react-card-flip --save

설치 방법


테이블과 뒷면을 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 업데이트
레드스-saga로 가요.
내년에도 css 주변에서 풍부한 구성 요소를 프로그램 라이브러리로 내놓으면 좋겠다고 생각합니다.

좋은 웹페이지 즐겨찾기