EN
React - onTransitionEnd example
0 points
In this article, we would like to show you onTransitionEnd event in React.
Below we create a simple button element that changes its style with transition property. When the transition effect ends the handleTransitionEnd function is called.
Note:
If
transitionincludes more than one parameter (e.g size and color), thehandleTransitionEndfunction will be executed as many times as the number of parameters.
Runnable example:
xxxxxxxxxx1
// Note: Uncomment import lines while working with JSX Compiler.2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const normal = {6
width: '100px',7
height: '20px',8
background: 'lightgreen',9
borderRadius: '20px',10
transition: '1.5s',11
outline: 'none',12
};13
14
const transformed = {15
width: '300px',16
height: '40px',17
background: 'lightgreen',18
borderRadius: '20px',19
transition: '1.5s',20
outline: 'none',21
};22
23
const handleTransitionEnd = (event) => {24
console.log('transition end');25
};26
27
const App = () => {28
const [buttonStyle, setButtonStyle] = React.useState(false);29
const handleClick = () => setButtonStyle(!buttonStyle);30
return (31
<div onTransitionEnd={handleTransitionEnd}>32
<button onClick={handleClick} style={buttonStyle ? transformed : normal}>33
Change size34
</button>35
</div>36
);37
};38
39
const root = document.querySelector('#root');40
ReactDOM.render(<App />, root );