Animate between views in React | css tricks (2023)

You know how some websites and web apps have that fancy native feel when switching between two pages or views? Sarah Drasner showed somegood examplesand including onesee Librarytear.

These animations are the kind of features that can turn a good user experience into a great one. But to achieve this in a React stack, you need to couple crucial parts into your app: the routing logic and the animation tools.

Let's start with the animations. We're going to build with React, and there are great opportunities that we can take advantage of. especially thereaction transition groupis the official package that handles elements going in and out of the DOM. Let's look at some relatively simple patterns that we can apply, even to existing components.

Transitions with the reaction transition group.

First, let's get acquainted with this.reaction transition groupLibrary to explore how we can use them to move elements in and out of the DOM.

Individual component transitions

As an example of a simple use case, we could try animating a modal or dialog, you know, the kind of element that benefits from animations that allow for smooth entry and exit.

A dialog component might look like this:

import React from "react";class Dialog erweitert React.Component { render() { const { isOpen, onClose, message } = this.props; return ( isOpen && ( <div className="dialog--overlay" onClick={onClose}> <div className="dialog">{message}</div> </div> )); }}

Please note that we use theIt's openprop to determine if the component is rendering or not. Thanks to the simplicity of the newly modified API provided by the React-Transition-Group module, we can add a CSS-based transition to this component without much overhead.

The first thing we need to do is wrap the entire component in anothertransition groupComponent. In it we save the support to mount or unmount the dialog that we include in aCSSÜbergang.

importar Reagir de „reagir“; importar { TransitionGroup, CSSTransition } de „react-transition-group“; Klassendialog erweitert React.Component { render() { const { isOpen, onClose, message } = this.props; return ( <TransitionGroup componente={null}> {isOpen && ( <CSSTransition classNames="dialog" timeout={300}> <div className="dialog--overlay" onClick={onClose}> <div className="dialog" >{mensaje}</div> </div> </CSSTransition> )} </TransitionGroup> ); }}

Every timeIt's openis modified, a series of class name changes are made to the root element of the dialog.

if we put themclass namessupport to"discard", afterfade inis added immediately before the element is assembled, and thenfade in activewhen the transition begins. we must seeFade-Enter-Donewhen the transition is complete, depending on thetime upthis has been established. Exactly the same will happen with thesalidagroup of class names at the time the element is unmounted.

That way, we can easily define a set of CSS rules to declare our transitions.

.dialog-enter { opacity: 0.01; transform: scale(1.1); }.dialog-enter-active { opacity: 1; transform: scale(1); transition: every 300ms;}.dialog-exit { opacity: 1; transform: scale(1); }.dialog-exit-active { opacity: 0.01; transform: scale(1.1); transition: every 300ms;}

JavaScript transitions

If we want to orchestrate more complex animations using a JavaScript library, we can use thiscrosscomponent in place.

This component does nothing for us like thisCSSÜbergangit did, but it shows hooks on every transition loop. We can pass methods to each hook to perform calculations and animations.

<TransitionGroup-Komponente={null}> {isOpen && ( <Transition onEnter={node => animateOnEnter(node)} onExit={node => animateOnExit(node)} timeout={300} > <div className="dialog- - superposición" onClick={onClose}> <div className="dialog">{mensaje}</div> </div> </Transition> )}</TransitionGroup>

Cada gancho pasa el nodo como el primer argumento de la devolución de llamada; esto da control de cualquier mutación que queramos cuando el elemento está montado o desmontado.

routing

The React ecosystem offers several router options. will wearreact-router-dombecause it's the most popular option, and because most React developers are familiar with the syntax.

Let's start with a basic route definition:

import React, { Component } from 'react'import { BrowserRouter, Switch, Route } from 'react-router-dom'import Home from '../views/Home'import Author from '../views/Author'import Acerca de from '../views/About'import Nav from '../components/Nav'class App erweitert Component { render() { return ( <BrowserRouter> <div className="app"> <Switch> <Routegenauer Pfad= " /" componente={Inicio}/> <Ruta ruta="/autor" componente={Autor} /> <Ruta ruta="/acerca de" componente={Acerca de} /> </Switch> </div> </ BrowserRouter > ) }}

We want three paths in this app: home, author, and about.

ThatBrowserRouterThe component handles browser history updates whileExchangedecide whichListelement to render depending onLargoSupport support. Here it iswhichany transition:

oil and water

While react-transition-group and react-router-dom are excellent and useful packages for their intended uses, mixing them together can break their functionality.

For example, himExchangeComponent in the direct fallback react router domListthe children and thetransition groupWait for components in the reaction transition groupCSSÜbergangocrossComponents can also be direct children of it. So we can't pack them like we used to.

We also can't switch views using the same boolean approach as before, as this is handled internally by the React router's dom logic.

Answer key to redeem

Although the solution may not be like thiscleansedAs in our previous examples, you can use the libraries together. The first thing we need to do is move our route declaration into a render prop.

<BrowserRouter> <div className="app"> <Route render={(location) => { return ( <Switch location={location}> <Route Exact Path="/" component={Start}/> <Route path ="/author" component={Author} /> <Route route="/over" component={Over} /> </Switch> )} /></BrowserRouter>

Nothing has changed in terms of functionality. The difference is that we now have control over what is rendered each time the position in the browser changes.

In addition, React-Router-Dom offers akeyin themTallaobject each time this happens.

In case you're not familiar with them, ReactkeyIdentify elements in the virtual DOM tree. In most cases, we don't need to specify them, as React will detect which part of the DOM to change and then fix it.

<path processing={({ location }) => { const { path name, key } = return location ( <Transition Group Component={null}> <Transition Key={key}erscheinungsbild={true } onEnter={(Knoten, erscheint ) => play(Pfadname, Knoten, erscheint)} timeout={{enter: 750, exit: 0}} > <Change location={location}> <Path Exact path="/" component={Home}/> < Path path="/author" component={Author} /> <Path path="/about" component={About} /> </Switch> </Transition> </TransitionGroup > )}}/>

Constantly changing an element's key, even if its children or props haven't changed, forces React to disassemble and reassemble it from the DOM. This helps us emulate the boolean toggle approach we had before, and is important to us here because we can put a singlecrosselement and reuse it for all of our display transitions so we can mix up the routing and transition components.

Inside animation function

Since transition hooks are called every time we change location, we can call a method and use any animation library to create more complex scenes for our transitions.

export const play = (caminho, nó, erscheint) => { const delay = erscheint ? 0: 0.5 lass timeline if (pathname === '/') timeline = getHomeTimeline(nodo, retraso) else timeline = getDefaultTimeline(nodo, retraso) timeline.play()}

OurplayThe function creates a timeline here depending on the GreenSock timelineroute name, and we can define any number of transitions for each path.

Once the broadcast timeline is createdroute name, we play.

const getHomeTimeline = ( node , delay ) => { const timeline = new Timeline ( { pause : true } ) ; const text = node.querySelectorAll('h1 > div'); timeline .from(node, 0, { screen: 'none', autoAlpha: 0, delay }) .staggerFrom(texts, 0.375, { autoAlpha: 0, x: -25, ease: Power1.easeOut }, 0.125); ; Rückkehrzeitachse}

Each timeline method drills down into the DOM nodes of the view and animates them. You can use other animation libraries instead of GreenSock, but the important detail is that we created the timeline in advance so that our mainplayThe method can decide which route will be executed for which route.

I've used this approach in many projects, and while it doesn't pose obvious performance issues for internal navigation, I've noticed a concurrency issue between the initial construction of the browser's DOM tree and the initial animation of the route. This resulted in a visual delay in the animation when the app was first loaded.

To ensure smooth animations at all stages of the app, there is one last thing we can do.

Defining the initial load profile

This is what I found when auditing the app in Chrome DevTools after a full update:

You can see two lines: one blue and one red. blue is for themchargeevent and red dataDOMContentLoaded🇧🇷 Both overlap with the initial animations running.

These lines indicate that the elements are being animated while the browser has not yet created the entire DOM tree or parsed the resources. The animations guarantee great acting successes. If we want anything else to happen, we'll have to wait for the browser to finish these heavy and important tasks before executing our transitions.

After trying several different approaches, the solution that really worked was to move the animation after these events; it's that easy. The problem is that we can't trust event listeners.

ventana.addEventListener('DOMContentLoaded', () => { timeline.play()})

If for some reason the event occurs before we declare the listener, the callback we pass in will never be executed and this could cause our animations to never happen and an empty view to be displayed.

Since this is a concurrent and asynchronous problem, I decided to rely on promises, but the question arose: how can promises and event listeners be used together?

Create a promise that will resolve when the event occurs. This is how you do it.

window.loadPromise = new Promise(resolve => { window.addEventListener('DOMContentLoaded', resolve)})

We can include this in the document.Kopfor just before the tag of the script that loads the application package. This ensures that the event never occurs before the promise is created.

In addition, we may use the data exposed globallyCargoPromesato any animation in our app. Suppose we want to not only animate the welcome view, but also a cookie banner or application header. We can easily invoke any of these animationsthereafterthe promise has come to an endafteralong with our transitions.

window.loadPromise.then(() => timeline.play())

This approach is reusable throughout the codebase, which eliminates the problem that would arise if an event were resolved before the animations were executed. It will refer them to the browser.DOMContentLoadedthe event is over

Now notice that the animation doesn't start until the red line appears.

The difference isn't just in the profiling report: it actually solves a problem we had in a real project.

To involve

As a reminder, I've made a list of tips for myself that you might find useful when dealing with view transitions in a project:

• When an animation is running, nothing else should happen.Run animations after all resources, recovery, and business logic are complete.
• No animation is better than bad animation.If you can't get a good animation, removing it is a fair sacrifice. The content is more important and it is a priority to show it until there is a good animation solution.
• Try on slower and older devices.They will make it easier for you to spot underperforming spots.
• Create a profile and base your improvements on metrics.Instead of guessing like I did, see if you can spot where the frames are dropping or if something is wrong and fix that problem first.

Is that! Good luck animating the display transitions. Please post a comment if this raised any questions or if you've used any transitions in your app that you'd like to share!