chenglou/react-motion

Add section to the README about generic usage of interpolated value

Open

#494 aberto em 25 de set. de 2017

Ver no GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (21.646 stars) (1.160 forks)batch import
docshelp wanted

Description

Put is somewhere at the top.

Make sure it is clear that styles prop is not working with, well, actually styles, but gives you ability to use value to derive all other values of your styles.

See https://github.com/chenglou/react-motion/issues/304#issuecomment-331750756

React motion does not operate "style" (I agree that is a misleading name for prop). It only applies function over any number you pass. This way it can stay minimal and you have all power to interpolate any number-related values.

<Motion defaultStyle={{whatever: 0}} style={{whatever: spring(1)}}>
  {({whatever}) => (
    <div style={{color: `rgb(${255 * whatever}, ${255 * whatever}, ${255 * whatever})`}}>
      Hey, I'm transitioning color!
    </div>
  )}
</Motion>

Related:

Guia do colaborador

Pilha de tecnologia
javascriptreact
Domain
documentation
Tipo Issue
documentation
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 hours
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
stale
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
clear
Prerequisites
Reactreact motion basics
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
85
Direção de pesquisa
Add a new section near the top of the README explaining that the `styles` prop is not for static styles but for interpolated values. Use the example from the issue to demonstrate transitioning color. Reference the linked comment for further clarification. Ensure the section highlights the library's core concept of applying functions over numbers.