score:1
just show me an example
this doesn't use immutable.js, but the current
property is just a number, which is immutable in js, so in some regards it's the same idea:
http://jsbin.com/ligejacolo/edit?js,output
imo the best option is reactcsstransitiongroup
+1 for the unnecessarily snarky reference to reactcsstransitiongroup in the comments, if you can use that.
after that, let the browser manage state via css transitions
i would store the pages
and currentpage
as props, regardless of whether the values are immutable.js instances (props are a stateful part of your ui, just like state, don't let the name fool you!). when they're stored as props, it provides a useful api to the users of your component.
if you're using css transitions then at any given moment you should be able to render the markup and classes based on this information.
for example, given the (over-simplified markup):
<div class=container>
<!-- set the class to something like "inner pane2" to go to the second pane -->
<div class=inner>
<span class=pane>...</span>
<span class=pane>...</span>
<span class=pane>...</span>
</div>
</div>
and some css like:
.container {
position: relative;
}
.inner {
position: absolute;
left: 0;
transition: left 0.3s ease-in-out;
}
.pane {
width: 100px;
}
.inner.pane2 {
left: -100px;
}
.inner.pane3 {
left: -200px;
}
the browser takes care of mid-transition changes to the properties.
often times you'll need to know when the animation is done, which you can accomplish with a transitionend
listener and isanimating
flag (which i would store in the state, not the props). set isanimating
when currentpage
changes and clear it on transitionend
.
you'll also often need to know which direction you're transitioning, which you can accomplish with a previouspage
prop.
finally, if you're just using javascript
keep a reference to the current transition in the state
(possibly the jquery selection used to start the animation, if that's what you're using). when the transition is done, remove the reference. if the currentpage
changes mid-transition, call .stop()
on the selection (or whatever api you're using).
Source: stackoverflow.com
Related Query
- How to do animations with React and Immutable.js?
- How to test a className with the Jest and React testing library
- How to import CSS modules with Typescript, React and Webpack
- How to mock React component methods with jest and enzyme
- How to set up Babel 6 stage 0 with React and Webpack
- How do I store JWT and send them with every request using react
- How to create forms with React and Rails?
- How to make react router work with static assets, html5 mode, history API and nested routes?
- How to correctly redirect after catching authentication failure with Apollo and React
- How to use React with Typescript and SASS
- How to test a component with a nested container with React and Redux?
- How to use vw and vh css with React Native
- How to test form submission in React with Jest and Enzyme? Cannot read property 'preventDefault' of undefined
- How to test snapshots with Jest and new React lazy 16.6 API
- How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
- how to work with react routers and spring boot controller
- How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc
- How to achieve re-useable components with React and mouse event propagation?
- How to use Django User Groups and Permissions on a React Frontend with Django Rest Framework
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- How to mock a React component lifecycle method with Jest and Enzyme?
- How safe is front end with react and redux?
- How to make pure, generic React components with immutable data that needs to be transformed
- How to nest Scene and navigate with direction='vertical' in React Native Router Flux?
- How to solve, craco: *** Cannot find ESLint loader (eslint-loader). *** error with ANTd and React (2021)
- how can I test if useState hook has been called with jest and react testing library?
- How to hot reload without being redirected to root with electron-forge and react
- How to optimize React components with React.memo and useCallback when callbacks are changing state in the parent
- How to import from React-Select CDN with React and Babel?
- 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
More Query from same tag
- How to make a npm package from Create React App /build folder?
- node_modules outside of the project directory are not transpiled by Babel (7)
- Passing Events in ReactJS Form
- Splice function on an array of objects
- React Stateless components - performance and PureRender
- Adding data to multiple tables using django rest serializers
- Can't add Authenticated Routes to react router dom
- Using leaflet and need to update component. How can I update the values in my constructor?
- Next.js page transition
- How do I set up an internal link in react that navigates the current document
- React Native Add Spacing Between Components
- Get user email from Auth0 AccessToken with google authentication
- React Login & Signup Form ant design onFinish not triggering
- Mapping objects in an array to table in React
- Flowtype error with react: This type is incompatible with props of JSX Intrinsic
- Get Dynamically created table Data in React Row
- REACTJS how to load a page at the end of timeout?
- React Router v2.4 { queryKey: false } no longer works
- Get TypeError: Cannot read properties of undefined (reading 'forEach') when pass a params
- React.js: Passing a callback to a child component and removing a component
- How to center my cards scrollable container in the middle in all my devices?
- How to verify user token before the dom is loaded?
- What does this error means? Render methods should be a pure function of props and state
- SyntaxError: Unexpected reserved word on running mocha with enzyme
- How can I rerender only one item in a flatlist?
- Is it possible in React to read data from text/properties file automatically and display it on browser?
- Optimized way to toggle multiple divs with the same handling function in React
- How to fetch an object array from Flux dispatcher in React?
- Getting name of all nested HOC wrappers and base component inside an HOC
- how to map array of images into two images per list item React JS