Criando uma animação de roleta usando a mudança de estados

Esse post servirá para o dia que a pessoa responsável pelo design decidir que é uma boa ideia ter um contador (ou algo que tenha botões de + / -) ou quando você simplesmente precisar animar um component de acordo com a mudança de uma prop ou estado.
Então vamos ao que importa...

Requisitos

(Lembrando que isso é pra você que está usando React)

• react-transition-group
  é uma mão na roda e se você já mexeu com VueJS vai pegar a ideia rapidinho

• styled-components
  isso facilita muito a vida quando vc precisa alterar as propriedades de css baseados nas props de react

Let's code

Primeiro precisamos ter uma ideia do que vamos fazer. Então vamos codar os components necessários para, pelo menos, aparecer na tela.

Ok... temos os nossos botões e o nosso component de roleta.
Temos também nosso estado, que é alterado toda vez que clicamos em algum dos botões.

Precisamos adicionar o react-transition-group para definir que queremos fazer uma animaçãozinha toda vez que o componente receber um novo value.

Pronto... Agora nós adicionamos o comportamento de roleta unidirecional. #topzeira

Vejamos alguns detalhes sobre o código em src/components/roulette.js:

• Usamos SwitchTransition para controlarmos o render do component na sua transição. O mode="out-in" diz explicitamente que queremos que o novo elemento filho seja inserido após a saída do antigo, por isso "out" e depois "in".
• O CSSTransition vai receber algumas props bem importantes para a nossa animação que são:
  • classNames é o prefixo que a gente usa nas classes do css. No nosso caso será .move-*
  • key é uma boa colocar algo que diferencie os estados. No exemplo colocamos o próprio value
  • addEventListener serve para adicionar um listener para o elemento que é chamado durante a transição. A função recebe dois parametros: node que é o próprio elemento e done que é o callback de quando finaliza a transição.
• adicionamos um div antes do nosso component de exibição do valor, porque precisamos de um elemento que receberá nossas classes .move-*

Show de bola... mas e se você quiser fazer uma animação pra cada lado, por exemplo, de cima para baixo quando "incrementa" e o contrário para quando "decrementa"? Bom... podemos armazenar um "direction" que receberá increment/decrement dependendo da situação e colocamos isso como prop no styled-components (é nesses casos que isso facilita bastante) fazendo com que alteremos a animação.

Obs.: como vamos mexer com mais de um estado, vamos mudar para useReducer... é sempre uma boa fazer isso, porque você altera tudo que precisa de uma vez só.

Bom é isso aí... espero que esse post ajude e que tenham gostado.