search

kriasoft / react-starter-kit

The web's most popular Jamstack front-end template (boilerplate) for building web applications with React
https://reactstarter.com
MIT License
22.69k stars 4.16k forks source link

Page transitions #434

Closed subodh-malgonde closed 3 years ago

subodh-malgonde commented 8 years ago

Any pointers on how to go about doing simple slide-in/slide-out transitions on url/component changes?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Bogdaan commented 8 years ago

@subodh-malgonde I think it is possible only in conjunction with react-router You can see https://github.com/reactjs/react-router/tree/master/examples/animations

dfrankland commented 8 years ago

@Bogdaan that's not the only way, React has an addon for animations: https://facebook.github.io/react/docs/animation.html

Bogdaan commented 8 years ago

@dfrankland Of course I know ReactCSSTransitionGroup, but can you provide working example with react-routing (https://github.com/kriasoft/react-routing)?

dfrankland commented 8 years ago

This really has nothing to do with react-routing. For a quick overview of one way to do it:

  1. Add a method to the context object inside client.js to get the window.location.
  2. Check for the window.location using the new method inside of this.props.context in the render method of the App component and pass it as a prop to its children.
  3. Inside the component you want to add the animation to, use the componentWillReceiveProps method to check if the URL changed and then use ReactCSSTransitionGroup to animate the rendering of the component.
Bogdaan commented 8 years ago

@dfrankland "Inside the component you want to add the animation to" as far as I understand, this issue about animation between the different routes. For example when i click on link (or change url in address) from "/a" to "/b". Your approach is to change the code of all the components?

dfrankland commented 8 years ago

By passing props to child components you may pick and choose which components you want to update based on a change in the route, you do not have to change anything, but the components you plan to animate.

ulani commented 3 years ago

@subodh-malgonde thank you very much for crating this issue! Unfortunately, we have close it due to inactivity. Feel free to re-open it or join our Discord channel for discussion.

NOTE: The main branch has been updated with React Starter Kit v2, using JAM-style architecture.