Add a class when component is appearing / disappearing

[floo51]

I'm going for a full material design app and I'd like to implement more transitions inside the views when they appear or disappear. Something like this, with the ❤️ icon appearing while the whole view is transitionning, taken from official guidelines, § Motion is clear*

I think that just adding a enter and leave class to the component whenever a transition starts would be enough.

Can you think of any other way ? Would you accept a PR on this ?

[maisano]

hi @floo51! this is a neat idea, though i fear opening up/leaking the abstraction outside of the current constraints may be harmful in the longterm. i am not entirely opposed to the idea, though i wonder if there is a workaround given the current api. can you think of any other alternatives than affixing a new class name?

[floo51]

Hmm we could try building a HOC so we could wrap components like:

import React from 'react';
import { withTransitionState } from 'react-router-transition';

const MyComponent = ({transitionState}) => (
    <div className={transitionState === 'mounting' ? 'whatever': 'something else'}></div>
);

export withTransitionState(MyComponent);

It gives control over what we wanna do when transitioning, wether we want to add a class or do something else. Not sure how feasible it is but I think it would be the best API, I can throw a PR in the week-end if needed !

[joneldiablo]

its there a way to set className to the wrapper, only when transition is runing?

[Lathryx]

I am also having this problem.