React-spring: useTransition on single component mount/unmount not working for me...

[rchrdnsh]

Trying to set up use transition on a single react component when it mounts and un-mounts, but it's not working for me currently. The children that are being fed into it render properly, but the animations simply don't fire. There are also no errors in the console or terminal either, so i just don't know what to do next...

I am trying to use your example from another issue, but not sure what I'm doing wrong because I do not fully understand the syntax of the API. Also, there was a toggle in your example, but I'm not using a toggle, just having the animation trigger automatically when the component mounts and un-mounts, in this case, from a router link.

Anyway, here is the component in full:

import React, { useState } from 'react'
import styled from 'styled-components'
import { useTransition, animated } from 'react-spring'

const Wrapper = styled(animated.main)`
  margin: 0;
  padding: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 
    minmax(1rem, 1fr) 
    minmax(1rem, 40rem) 
    minmax(1rem, 1fr)
  ;
`
const PageWrapper = (props) => {
  const [state, toggle] = useState(true);
  const transition = useTransition(state, null, { 
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });
  return transition.map(({ item, key, fade }) =>
    item && <Wrapper key={key} style={fade}>{props.children}</Wrapper>
  )
}

export default PageWrapper

If you can figure out what I'm doing wrong, please let me know.

Thank you! XD

[kodai3]

useTransition returns

Array<{
  items: ItemsProp<Item>,
  keys: ItemKeys<Item>,
  props: Props
}>

so i think you should pass "props" to style instead of "fade"

[rchrdnsh]

hmmmmm...that did not work at all and completely broke the entire app.

I am assuming that since I pass props to the component itself, which is all of the content that is being rendered inside this container, and then I access it via props.children then there would be a collision with the props word in the usage of the useTransition hook, which is why I initially switched the term to fade. Is there any way of making this hook work when I am already using the prop word for something different in the same component?

[aleclarson]

If you could setup a CodeSandbox, we could help you more easily. But first, try this:

-return transition.map(({ item, key, fade }) =>
+return transition.map(({ item, key, props: fade }) =>
    item && <Wrapper key={key} style={fade}>{props.children}</Wrapper>
 )

[rchrdnsh]

ooh, oooh, oooh! props: fade seems to be making it work, thank you!

Another quick question, I hope...

Are the animations firing in succession? Meaning if I make the fade out last for 500ms then will the fade in wait until the fade out is complete before triggering, or do they happen concurrently?

I'm trying to time this transition animation with a reset of it's parent containers scroll position, so that fade out triggers when the component unmounts, then the scroll position is reset, and then the fade in occurs when the component mounts again.

[aleclarson]

Sorry, that one's definitely gonna need its own issue and a CodeSandbox. Thanks! 👍