reactjs - How to defer this.props.onClick() until after a CSS animation is complete? -

i calling custom nanobutton component page along onclick instruction route page:

// page.js import { component } 'react'; import router 'next/router'; class page2 extends component {   render() {     return(       <nanobutton type="button" color="success" size="lg" onclick={() => router.push('/about')}>about</nanobutton>     )   } } 

when button (nanobutton component) clicked, want execute internal code before moving on onclick coming in props. through internal code, trying simulate material-design ripple effect lasts 600 milliseconds. how it:

import { component } 'react'; import { button } 'reactstrap';  class nanobutton extends component {   constructor(props) {     super(props);     this.onclick = this.onclick.bind(this);   }   onclick(e) {     this.makeripple(e);     this.props.onclick();   }   makeripple(e) {     const elements = e.target.getelementsbytagname('div');     while (elements[0]) elements[0].parentnode.removechild(elements[0]);     const circle = document.createelement('div');     e.target.appendchild(circle);     const d = math.max(e.target.clientwidth, e.target.clientheight);     circle.style.width = `${d}px`;     circle.style.height = `${d}px`;     const rect = e.target.getboundingclientrect();     circle.style.left = `${e.clientx - rect.left - (d / 2)}px`;     circle.style.top = `${e.clienty - rect.top - (d / 2)}px`;     circle.classlist.add('ripple');   }   render() {     return (       <button         classname={this.props.classname}         type={this.props.type}         color={this.props.color}         size={this.props.size}         onclick={this.onclick}       >         {this.props.children}       </button>     );   } }  export default nanobutton; 

so can see, need makeripple method execute before this.props.onclick. , initially, didn't seem doing that. however, after further testing, turns out methods run in right order after all, except routing (as coded in this.props.onclick) happens instantly , ripple animation that's styled last 600 milliseconds doesn't chance run. css makes animation happen is:

button {     overflow: hidden;     position: relative; }  button .ripple {     border-radius: 50%;     background-color: rgba(255, 255, 255, 0.7);     position: absolute;     transform: scale(0);     animation: ripple 0.6s linear; }  @keyframes ripple {     {         transform: scale(2.5);         opacity: 0;     } } 

how make this.props.onclick run after animation complete? tried setting timeout so:

settimeout(this.props.onclick(), 600);

but throws error.

note: i'm using nextjs server side rendering, if makes difference.

there lot of ways it, promise, async/await, etc. if try settimeout please use

settimeout(() => this.props.onclick(), 600); 

or

settimeout(this.props.onclick, 600); 

your case:

settimeout(this.props.onclick(), 600); 

won't work because line pass result of this.props.onclick() first param instead of passing whole function.