Skip to content
This repository has been archived by the owner on Apr 14, 2020. It is now read-only.

Introduce element persistence for exiting animation #161

Open
itsdouges opened this issue Aug 18, 2019 · 0 comments
Open

Introduce element persistence for exiting animation #161

itsdouges opened this issue Aug 18, 2019 · 0 comments

Comments

@itsdouges
Copy link
Owner

itsdouges commented Aug 18, 2019

Currently when animating an exiting component it ends up cloning the target element to keep it around for the duration of the motion (see FocalConcealMove).

This works - but leads to weird behaviour - and more importantly isn't as performant. Until there is an official solution (or we can wrangle trying to use React Suspense cleverly) - let's introduce a component to persist the element for the duration of the motion.

As a benefit we also no longer need to write explicit motions just for exit animation.

An API could look like (with react router):

<Route path="/details/:id">
  {({ match }) => (
    <MotionPersistence>
      {match && (
        // Somewhere inside the route there would be a motion. It more than likely won't be top level though.
        <div><Motion>{motion => <div {...motion} />}</Motion></div>
      )}
    </MotionPersistence>
  )}
</Route>

Note: Currently the Motion component has an in prop. We could also do something with that perhaps. Historically the in prop was always used for an element which never left the DOM. And generally from a list view (that persists behind some content) to a details view (which is loaded in/out on demand).

<Route path="/details/:id">
  {({ match }) => (
      <Motion in={match}>{motion => <div {...motion} />}</Motion>
  )}
</Route>

However that would also mean introducing more kB into the primary Motion component. And mixing logic. But the API is a little simpler...


Both API's should enable persisting the element when being removed from the DOM over the duration of the motion.


Then there is the problem of applying motion. Currently exiting elements are the origin and the entering elements are the destination - whereby in the motion components you would setChildProps() to apply some styles... to the destination... hopefully you're seeing the problem.

We want to setChildProps() on the origin element. How do?

We also want to know when the motion is finished. In the current world the destination motion is the one that will do the actual triggering.

@itsdouges itsdouges changed the title Introduce MotionPersistence for exiting animation Introduce element persistence for exiting animation Aug 18, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

1 participant