Menu
I have a ReactCSSTransitionGroup I'm using with CSS Modules (and dynamic routing from react-router but I believe this is working as expected).
<ReactCSSTransitionGroup
component="div"
transitionName={transitions}
transitionAppear
transitionAppearTimeout={1000}
transitionEnterTimeout={2000}
transitionLeaveTimeout={2000}
>
{React.cloneElement(this.props.children, {
key: location.pathname,
})}
</ReactCSSTransitionGroup>
The appear and leave transitions work perfectly - but the enter transitions do not - they simply appear immediately, with the previous component fading out after the new component has entered.
The CSS (using CSS Modules):
.enter {
opacity: 0.01;
}
.enter.enterActive {
opacity: 1;
transition: opacity 500ms ease-in;
}
.leave.leaveActive {
opacity: 0.01;
transition: opacity 2000ms ease-in;
}
.appear {
opacity: 0.1;
transition: opacity 1000ms ease-out;
}
.appearActive {
opacity: 1;
transition: opacity 1000ms ease-out;
}
--- EDIT ---
I discovered that it works as expected on child routes (I only have a small handful of those in my app). All routes including child routes are loaded dynamically, so I'm still not sure what causes it to work in those cases but not in others.
868
A CSS Module is a CSS file that defines class and animation names that are scoped locally by default.
With styled-components you attach the styles right to the component and don't really name anything. With css-modules, you're applying the styles directly to an HTML element only. With styled-components you can apply the styles to custom components and it will slap the styles on by way of spreading props later.
To import a CSS Module into the corresponding component, import the css modules stylesheet as styles or [name]Styles : In JSX, use the defined CSS class as a className prop like so: From here, you can add as many other CSS modules you'd like, just remember to import each as a different name.
There are many bugs with CSS transitions at the browser level, and each type of transition has different dependencies(according to the docs)
Suggestion is to use a more developer friendly api:
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
