Replies: 1 comment
-
The transition function isn't well documented on the current docs. Check this out instead https://beta.react-spring.dev/docs/components/use-transition for (what i think) is a better explanation, happy to hear your thoughts. type TransitionFn = (
style: SpringValues,
item: Item,
transitionState: TransitionState<Item>,
index: number
) => ReactNode
The style parameter is inferred on the props you passed depending on the current state of the transition e.g.
It makes the most sense for people to use
I'm afraid reading your whole question, I don't understand what you're asking to help out on that one. |
Beta Was this translation helpful? Give feedback.
-
Hi, I'm trying to use react spring to make a simple photo carousel similar to this one. I basically want the images to fade in and out periodically, but I also want the ability to toggle between them manually with clicks. This is a long post, because I also want to understand the way some of these elements work.
There are 2 examples on the useTransition page that I think I can combine/customize to suit my needs. The first one is the standard image fade example, and the other one is a toggle animation. I think if I change the translate values in the toggle animation snippet, it will essentially create a unidirectional fade carousel.
Now, I'm having some trouble understanding the different parts of the code used in these snippets, because the documentation doesn't really clarify it for me.
transition
function accepts a callback that takes 4 arguments, but in both of those snippets, I see only two. Why is that?style
parameter here? Is it the second parameter that's being passed touseTransition()
? I.eIf so, why does the spread operator need to be used? Furthermore, why does this page say that these values are not "styles"? What does that mean?
transitions()
takes in:Here, the
Page
element (let's takepages[0]
for example) just translates toso why is there a
style
attribute inside thePage
component if theanimated.div
inside it already contains astyle
attribute?I'm relatively new to React in general, so detailed answers would be greatly appreciated. Please assume I know nothing :)
P.S There might be other libraries out there that are better suited for a simple photo carousel like this, but I plan to use react spring for other animations in the future, so I thought I'd start using it now.
Beta Was this translation helpful? Give feedback.
All reactions