useTransition examples

[jimmytheguitarman]

Can you please make a full example of

https://react-spring.io/hooks/use-transition#you-can-transition-arrays

in JSX with css stylesheet, imports, and the declaration of what is being transitioned and with a little more explanation of what is
going on!!!!

How can you pass a react element in a <animated.div><"react-element/></animated.div> and how to pass the props properly????

[joshuaellis]

Look, I'm sorry you don't think the documentation is up to your standard, but do you expect me or anyone else to answer a question written like this?

If you could be a bit more mindful at the fact anyone who contributes to this library including myself as its primary maintainer right now does this in their free time you might be a bit more appreciative of the work.

Have you checked out the sandbox demos at the bottom of the page?

[jimmytheguitarman]

I'm very sorry,

just frustrated at the moment. you're right, i'll try to be more mindfull.
I'm still learning everything, javascript, react. Docs often tend to be more oriented to people who are more familliar with programming. Or familiar wit an older version of a module.

The sandbox examples are all written in TSX with a different styling approach with those style.modules.css.

I just want to make elements in an array to be animated when they enter, or leave the array, only the elements that enter or leave.

I've checked all useTransition examples, and in none of them is a react component used between the <animated.div> tags.

When i try to import the examples in my code editor, none of them work.

[joshuaellis]

Okay, so lets take this one and break it down a bit.

const Components = [
  ({ styles }) => <animated.div style={{ ...style, background: 'lightpink' }}>A</animated.div>,
  ({ styles }) => <animated.div style={{ ...style, background: 'lightblue' }}>B</animated.div>,
  ({ styles }) => <animated.div style={{ ...style, background: 'lightgreen' }}>C</animated.div>,
]

This is our array of React components, they're unnamed but it doesn't matter. We're always passing the returned styles from a useSpring (or any other hook) to an animated component.

So actually it could look like this:

const MyCube = (props) => {
  return <animated.div {...props}>hello!</animated.div>
}

const Components = [MyCube, MyCube, MyCube]

You'll notice I didn't write <MyCube /> this is because that would call the function. We just want a reference.
Now we can start working with our useTransition hook.

export default function FadeInBox({ activeIndex }) {
  const transitions = useTransition(activeIndex, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
  })
  return (
    <div>
      {transitions((style, activeIndex) => { 
          // the arguments for transition are - 1: the styles for the component, 2: the item(s) you passed to the hooks
          const Comp = Components[activeIndex]
          // here we're calling the component.
          return <Comp styles={style} />
        })
       }
    </div>
  )
}

So in the above, we're passing an activeIndex for the one we want to show, but we could also pass the array of items and have them all animated e.g. a list of to-dos and then filter out the ones we don't want, the would transition out on mutation of the array.

The key bits to remember:

• styles from springs must be passed to an animated component.
• If you're passing to to an abstraction (in this case, MyCube) then you need to make sure the props are passed.
• You can an animate by using an array of elements of a signifier e.g. index value to the array item you want to animate.

I hope this helps you, do you have any specific questions?

[jimmytheguitarman]

Josh,first off, thank you for the effort to answer to my question. I'll definately going to try to get this working, but it will take some time. It can be very frustrating when getting stuck. Again, sorry for my unpoliteness,Best regards,DavyOp