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 주변에서 풍부한 구성 요소를 프로그램 라이브러리로 내놓으면 좋겠다고 생각합니다.
Reference
이 문제에 관하여(React에 카드를 쉽게 뒤집을 수 있는 애니메이션 설치), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/smith-30/items/94da770c4422c1506b8a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)