React - onTransitionEnd example

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 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
      </button>
    </div>
  );
};

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

See also

• React - why onTransitionEnd fires multiple times?