score:5
Accepted answer
your problem is because your key is not updating. since you are replacing key of 0 with key of 0, it think it has already applied the transition.
when changing the key to be ${entry}_${index}
, it'll update they key to 'a_0', then 'f_0' which are unique and different, and therefore trigger the effect you want.
entry
alone as a key does not work either, since it already exists in the dom, so it'll not re-render the transition.
<transition
native
from={{
transform: `translatey(${index === 0 ? "-200%" : "-100%"})`
}}
to={{ transform: "translatey(0)" }}
config={config.slow}
key={`${entry}_${index}`}
>
check it here https://codesandbox.io/s/kkp98ry4mo
Source: stackoverflow.com
Related Query
- React-spring animation only works at first render
- React 17.0.2 Functional Component Only Plays CSS Animation on First Render
- React useEffect() only run on first render with dependencies
- React scroll to bottom only works for the first time (demo inside)
- setState works only for first time in React js
- Why does this react form works only for the first time?
- onClick() works on the first click only - React
- Why animation works only for the first slide and not for the others?
- React router only works for the first path listed, not for all
- ReactJS SyntheticEvent stopPropagation() only works with React events?
- What is the React equivalent of an Angular directive that only works on attributes?
- React setState not working on first try, but works on second?
- Which is the right way to detect first render in a react component
- Does React render the WHOLE component if only one part of the component changed?
- How to render React components only once on startup?
- Only render a react component when I on submit from a form
- React Router V4: How to render a modal in the same screen changing only the url and then with that url, be able to rebuild the whole screen
- How to load child component with props on first render with React Hooks
- Receiving error - Hooks can only be called inside of the body of a function component when implementing React Spring basic example
- React Render a parent only when Child is rendered
- How to render component only once in React Native
- React Hook does not work properly on the first render in gatsby production mode
- Animation duration in React Spring
- useEffect function open/close modal based in props works only at first time (click)
- "Each child in an array should have a unique key prop" only on first time render of page
- React Native Fetch works only on second click
- ReactJS: Show or hide element works only on first button click
- Typescript Webpack React compilation resulting in read only file system error, but dev server works fine
- React CSS animations only after initial render
- TSparticles React render particles only inside component
More Query from same tag
- Issue with Menu.Item NavLink always active Semantic UI React
- Adjacent JSX Elements must be wrapped in an enclosing tag reactjs
- How do I reorder/sort Firebase data in React App?
- Why getting the specified value "Result" cannot be parsed, or is out of range?
- React Dropzone FileReader - cannot read as File: {}
- Using included script in index.html in React components
- Is it OK to use unique, stable functions (e.g. components) rather than strings as React keys?
- Math.random() generating same number when put in a function
- Function not returning component after form submit in React
- TypeError: undefined is not an object (evaluating 'appState.remove')
- Check uniqueness with in nested object property values in array of objects
- How to center Items in react
- Nested Loop inside reactjs
- React native where to load fonts?
- React: trying to check/uncheck checkbox
- Why is it considered ok to mutate a shallow copy of my state?
- Use Updated API data(From UseEffect) to Update Another State Value
- How to get a reference to target element inside a callback
- Not getting tree with expected link style in ReactJS using D3
- Creating a history page with React Hooks
- How to sort JSON array/object pulled from API?
- Unit test form submission with data using react testing library
- How to close the parent dialog once the child dialog opens, using Material UI React
- Socket.io join() doing nothing
- The beautiful way for setting m and p responsively for a `Box` in Material-UI v4
- map.removeSource does not remove source geoJSON points
- Using handleClick to get props from a card component in React
- How to delay (e.g. 1s) the showing of a loading indicator in React Redux Saga App?
- how to handle click only one <li> item in react
- Mock componentDidMount lifecycle method for testing