React - onTransitionEnd example

0 points
Created by:

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.


If transition includes more than one parameter (e.g size and color), the handleTransitionEnd function will be executed as many times as the number of parameters.

Runnable example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines while working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const normal = {
  width: '100px',
  height: '20px',
  background: 'lightgreen',
  borderRadius: '20px',
  transition: '1.5s',
  outline: 'none',

const transformed = {
  width: '300px',
  height: '40px',
  background: 'lightgreen',
  borderRadius: '20px',
  transition: '1.5s',
  outline: 'none',

const handleTransitionEnd = (event) => {
  console.log('transition end');

const App = () => {
  const [buttonStyle, setButtonStyle] = React.useState(false);
  const handleClick = () => setButtonStyle(!buttonStyle);
  return (
    <div onTransitionEnd={handleTransitionEnd}>
      <button onClick={handleClick} style={buttonStyle ? transformed : normal}>
        Change size

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

See also

Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂