Upload
olivier-tassinari
View
596
Download
1
Embed Size (px)
Citation preview
Screen transitions with easeOlivier Tassinari, Doctolib, @oliviertassinari
React Paris Meetup
Why using transitions ?
• Provide a better UX
• Makes the users wait
• Create a visual mapping of the state of the app
• The native apps have well understood this, what about the web?
In practice
@oliviertassinari
@neozirostreamlining access to healthcare
How was it done?
1. Apply a transition?
• Takes two variables:
• A transition
• A screen The key is really important, it’s allow TransitionGroup to distinguish the children
The API
An implementation example
• An imperative API
• Rely on the CSS properties and class names
react-addons-css-transition-group
• A declarative API
react-motion
Which one to use?
css-transition-group :)
react-motion :(
with a x5 CPU throttling to simulate low-end devices
2. Organize the screens?
• A declarative API
• Manage the screens
• Each screen has his own URL
react-router
• React-router provides a simple transition example
• Works well
A simple fade
With an other transition?
• A more complex one
No :(
• We also need to manage the transitions based on the screen we display
Using a custom state?
• No
• We need to be highly bound to the history API
• We need to handle the Android back button
Apply the transition on the routes? :(
• Is declarative
• But, we need to distinguish the show and dismiss transition
• But, we often needsome customtransition on some button
We can’t have show-from-right and reveal-from-right at the same time
With a full mapping :(
• The number of combinations can potentially be n^2
• Hard to maintain over time
Our solution
Home
Actions Views Transitions
Our solution
Home
Login
Actions Views Transitions
dismiss: reveal-from-right 1. show: show-from-right
1.show
Our solution
Home
Login
Forgot Password
Actions Views Transitions
dismiss: reveal-from-right 1. show: show-from-right
dismiss: reveal-from-right 2. show: show-from-right
2.show
Our solution
Home
Login
Actions Views Transitions
dismiss: reveal-from-right 1. show: show-from-right
3. dismiss: reveal-from-right 2. show: show-from-right
3.dismiss
Our solution
Home
Actions Views Transitions
4. dismiss: reveal-from-right 1. show: show-from-right
3. dismiss: reveal-from-right 2. show: show-from-right
4.dismiss
Not landing on the home page?
Login
Actions Views Transitions
dismiss: reveal-from-right show: show-from-right
Not landing on the home page?
Home
Login
Actions Views Transitions
1. dismiss: reveal-from-right show: show-from-right
1.dismiss
Works greats :)
• An example with a user landing on a nested screen
• Advanced features:
• Support nesting
• Upcoming improvements
• Open sourcing of the TransitionGroup
• Wait for the screen to be mounted before triggering the transition
• Disabling the transitions on low-end devices that are just too slow
doctolib/react-router-transitions
Open source