Wrapper component enter animations not working with useRef

[stevecastaneda]

This is a wrapper component I built to add and remove classes at different transition states (for Tailwind) inside a TransitionGroup.

What is the current behavior?

I'm able to get exit animations to work fine, but enter animations are not working.

What is the expected behavior?

Enter animations should run just like the exit, I feel like it has something to do with my ref.

Could you provide a CodeSandbox demo reproducing the bug?

https://codesandbox.io/s/frosty-clarke-4dzl1?file=/src/App.tsx

[zeekrey]

Hey, came here by searching - I got almost the same issue.

But your example works for me. It animates both, entering and leaving.

Experiencing the same issue, here is my tiny codesandbox (without using refs, but with styled components): https://codesandbox.io/s/simple-react-transition-group-mejke?file=/src/App.js

I don't feel like I'm doing crazy stuff, looks like I'm missing a fundamental thing:

The page itself:

<TransitionGroup>
        {list.map((item, index) => (
          <Transition timeout={500} key={item.id}>
            {state => <MyComponent state={state}>{item.name}</MyComponent>}
          </Transition>
        ))}
</TransitionGroup>

The component:

const MyComponent = styled.div`
  background-color: red;
  transition: opacity 500ms ease-in-out;
  opacity: ${props =>
    props.state === "entering" || props.state === "entered" ? 1 : 0};
`;

[MangelMaxime]

Hello,

I have the same issue.

My work around is to use set the appear props and use that class instead to mimic the enter behaviour.