Open stevecastaneda opened 4 years ago
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};
`;
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.
This is a wrapper component I built to add and remove classes at different transition states (for Tailwind) inside a TransitionGroup.
I'm able to get exit animations to work fine, but enter animations are not working.
Enter animations should run just like the exit, I feel like it has something to do with my ref.
https://codesandbox.io/s/frosty-clarke-4dzl1?file=/src/App.tsx