Hi there! 👋😊
In this article, I would like to show you how to make an animated rotating square in React using transition property. ⏭
Before we start, I would highly recommend you to check out the runnable example for the solution on our website:
React - how to make animation with CSS transition property
Below example presents three style objects:
-
normalStyle
which is the default style of our div element, -
transformedStyle
which is transformed style of our div element, -
buttonStyle
which 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
.
Practical example:
import React from 'react';
// --- style objects -------------------------------
const normalStyle = {
margin: '50px',
padding: '20px',
borderRadius: '10px',
width: '100px',
height: '100px',
background: '#06f2ff',
boxShadow: '5px 5px 5px #04bd57',
transition: '1s, transform 2s',
};
const transformedStyle = {
margin: '50px',
padding: '20px',
borderRadius: '10px',
width: '150px',
height: '150px',
background: '#06ff76',
boxShadow: '5px 5px 5px #3085d6',
transition: '1s, transform 2s',
transform: 'rotate(180deg)',
};
const buttonStyle = {
padding: '2px',
border: '2px solid white',
background: 'black',
boxShadow: '5px 5px 5px grey',
textShadow: '1px 1px 1px black',
fontWeight: '900',
color: 'white',
borderRadius: '10px',
};
// --- component -------------------------------------
const App = () => {
const [bigSize, setBigSize] = React.useState(false);
const handleClick = () => setBigSize(!bigSize);
return (
<div style={{ height: '300px' }}>
<div style={bigSize ? transformedStyle : normalStyle}>
<button style={buttonStyle} onClick={handleClick}>
Change size
</button>
</div>
</div>
);
};
export default App;
You can run this example here
📝 Note:
If the duration is not specified, the transition will have no effect, because the default value is0
.
If you found this solution useful you can leave a comment or reaction 💗🦄💾.
Thanks for your time and see you in the upcoming posts! 😊
Write to us! ✉
If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions
You can also join our facebook group where we share coding tips and tricks with others! 🔥
Top comments (1)
Small hint: use the spread selector to make obvious which styles are changed: