1
resposta

Animação de um componente com rederização condicional

Eu tenho um card e nesse card tem uma imagem ou um video, o que eu estou tentando fazer inicialmente o card tem uma imagem só que quando o usuario colocar o mouse sobre a imagem preciso que ocorra uma transição suave de imagem para o video.

<Card>
                  {videos[index] ? (
                    <div 
                    onMouseLeave={() => offVideos(index)}
                      onClick={() => irParaDetalhes(e.id)}>
                      <Player autoPlay src={video}>
                        <BigPlayButton position="center" />
                      </Player>
                    </div>
                  ) : (
                    <Card.Img
                      variant="top"
                      src={play}
                      onMouseEnter={() => onVideos(index)}
                    />
                  )}
                </Card>
1 resposta

Oi Iago, tudo bem?

Não sei se entendi muito bem a sua dúvida, mas na documentação do React tem uma parte que fala sobre Renderização condicional, onde fala sobre você conseguir renderizar somentes alguns dos elementos que deseja, dependendo do estado da sua aplicação.

Um abraço e bons estudos.