ZooApp
source link: https://www.tuicool.com/articles/BVrqyef
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
ZooApp
This is a web experiment for native-like animations/transitions between 'current page leaving the DOM' and 'new page entering the DOM’ using ReactJs and CSS.
When an item is selected from the listing page, the common elements among the listing page and the detail page for the selected item (image and its background in our case) are animated from their current positions on listing page to their destination positions on the detail page. The reverse also works the same way.
The interesting thing to be noticed in this demo is that the leaving page also leaves the DOM rather than staying in it.
Preview
Desktop view
iPad view
Mobile view
See live
https://zooapp.mindinventory.net/
Technologies
Development
ReactJs
State management
ReactJs Context API
Transitions
CSS
First of all, install all the packages.
npm install
In the project directory, you can run.
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Feel free to share your views on this.
Have an awesome idea? We will provide a quick analysis and free proposal for it. Don’t worry, it is secure and confidential.
Contact us on http://www.mindinventory.com/inquiry.php or [email protected]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK