reactjs - 我正在使用语义 ui 反应卡。我正在尝试创建记忆游戏。有没有办法可以让卡片翻转动画。

Question

我的卡片组件

   <Card 
   image={card.flipped || card.discovered ? card.url : 'http://flotrend.com/wp-content/uploads/2016/06/placeholder-400x400.png'}
   onClick={() => flipCard(card.id)}
 />

库中有一个 Reaveal 组件。如下所示。

    import React from 'react'
import { Image, Reveal } from 'semantic-ui-react'

const RevealExampleFade = () => (
  <Reveal animated='fade'>
    <Reveal.Content visible>
      <Image src='/assets/images/wireframe/square-image.png' size='small' />
    </Reveal.Content>
    <Reveal.Content hidden>
      <Image src='/assets/images/avatar/large/ade.jpg' size='small' />
    </Reveal.Content>
  </Reveal>
)

export default RevealExampleFade

但它会在悬停时制作动画。有没有办法让它在点击时切换内容？我看不到任何我们可以看到的例子。

Answer 1

您可以通过有条件地渲染 Card 组件，通过 onClick 事件使 Card 变得可见。它最终会看起来像这样：

import React from 'react'
import { Image, Grid } from 'semantic-ui-react'

const FlipCard = (props) => {
  const { id, flipped, cardImage } = props.card
  const { hiddenImage, onCardFlip } = props

  if(flipped){
    //this image will be displayed once the card is clicked
    return(
      <Image width={200} src={cardImage} />
    )
  }
  else{
    //this image will be displayed if the card has not been clicked
    return(
      <Image id={id} onClick={onCardFlip} width={200} src={hiddenImage} />
    )
  }
}

class CardGame extends React.Component {
  constructor(){
    super();
    this.state = {
      cards : [
        {
          id: 0,
          flipped: false,
          cardImage: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Playing_card_spade_A.svg/2000px-Playing_card_spade_A.svg.png',
        },
        {
          id: 1,
          flipped: false,
          cardImage: 'http://vignette2.wikia.nocookie.net/yugioh/images/d/d4/BlueEyesWhiteDragon-DUSA-EN-UR-1E.png/revision/latest?cb=20170330172041',
        },
        {
          id: 2,
          flipped: false,
          cardImage: 'https://www.palossports.com/imagez/15327_12.jpg',
        },
      ],
      hiddenImage: 'https://s-media-cache-ak0.pinimg.com/originals/6c/a0/16/6ca016115a894f69dea75cc80f95ad92.jpg',
    }
  }

  handleCardFlip = (e, data) => {
    const cards = this.state.cards
    cards[e.target.id].flipped = true
    this.setState({ cards })
  }

  render(){
    const { hiddenImage, cards } = this.state

    const mappedCards = cards.map( card => {
      return(
        <FlipCard key={card.id} hiddenImage={hiddenImage} card={card} onCardFlip={this.handleCardFlip} />
      )
    })

    return(
      <div>
        { mappedCards }
      </div>
    )
  }
}

export default CardGame