EN
React - how to make animation with CSS transition property
3 points
Hi there! 👋😊
In this article, I would like to show you how to make an animated rotating square in React using transition property. ⏭
Final effect:
In below example I've created three style objects:
normalStylewhich is the default style of our div element,transformedStylewhich is transformed style of our div element,buttonStylewhich is style of our button element.
The styles of our div have transition value set to '1s'. It means our component will change it's property values smoothly, over a given duration (over 1s). Additional transform parameter describes moving of an element. In our case transform rotates the element during 2s.
Runnable example:
xxxxxxxxxx1
// Note: Uncomment import lines during working with JSX Compiler.2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
// --- style objects -------------------------------6
7
const normalStyle = {8
margin: '50px',9
padding: '20px',10
borderRadius: '10px',11
width: '100px',12
height: '100px',13
background: '#06f2ff',14
boxShadow: '5px 5px 5px #04bd57',15
transition: '1s, transform 2s',16
};17
18
const transformedStyle = {19
margin: '50px',20
padding: '20px',21
borderRadius: '10px',22
width: '150px',23
height: '150px',24
background: '#06ff76',25
boxShadow: '5px 5px 5px #3085d6',26
transition: '1s, transform 2s',27
transform: 'rotate(180deg)',28
};29
30
const buttonStyle = {31
padding: '2px',32
outline: 'none',33
border: '2px solid white',34
background: 'black',35
boxShadow: '5px 5px 5px grey',36
textShadow: '1px 1px 1px black',37
fontWeight: '900',38
color: 'white',39
borderRadius: '10px',40
};41
42
// --- component -------------------------------------43
44
const App = () => {45
const [bigSize, setBigSize] = React.useState(false);46
const handleClick = () => setBigSize(!bigSize);47
return (48
<div style={{ height: '300px' }}>49
<div style={bigSize ? transformedStyle : normalStyle}>50
<button style={buttonStyle} onClick={handleClick}>51
Change size52
</button>53
</div>54
</div>55
);56
};57
58
const root = document.querySelector('#root');59
ReactDOM.render(<App />, root );📝 Note:
If the duration is not specified, thetransitionwill have no effect, because the default value is0.