Get started with react-transition-group CDN
BSD-3-Clause licensed
React Transition Group is a popular library for managing component transitions in React applications.
Tags:- react
- transition
- addons
- transition-group
- animation
- css
- transitions
Stable version
Copied!
How to start using react-transition-group CDN
import React, { useState, useEffect } from 'react';
import CSSTransition from 'react-transition-group/CSSTransition';
const FadeIn = ({ children }) => {
const [inState, setInState] = useState(false);
useEffect(() => {
const timer = setTimeout(() => {
setInState(true);
}, 1000);
return () => clearTimeout(timer);
}, []);
return (
<CSSTransition in={inState} timeout={500} classNames="fade">
{children}
</CSSTransition>
);
};
const App = () => {
return (
<div className="App">
<button onClick={() => console.log('Clicked')}>Click me</button>
<FadeIn>
<h1>Hello, world!</h1>
</FadeIn>
</div>
);
};
export default App;
// Add the following CSS rules to make the fade transition work
// You can add them to your global styles or inline in the component
const fadeIn = {
opacity: 0,
filter: 'blur(2px)',
transition: 'all 0.5s ease',
};
const fadeInActive = {
opacity: 1,
filter: 'blur(0)',
};
.fade-enter {
opacity: 0;
filter: blur(2px);
transition: opacity 0.5s ease, filter 0.5s ease;
}
.fade-enter-active {
opacity: 1;
filter: blur(0);
transition: opacity 0.5s ease, filter 0.5s ease;
}
Copied!
Copied!