Where to put callback function in react-transition-group

Question

I want to run a process only after transition has ended.

Here the docs say:

addEndListener

Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine grained transition end logic. Note: Timeouts are still used as a fallback if provided.
addEndListener={(node, done) => {
  // use the css transitionend event to mark the finish of a transition
  node.addEventListener('transitionend', done, false);
}}

So I use it like this:

<Transition
  addEndListener={(node, done) => {node.addEventListener('transitionend', done, false);}}>
  <MyComponent />
</Transition>

The problem is I don't understand where to put my function to be executed after the transition ended.

If this is my function:

function abc() {
  // blah
  // blah
  //blah
}

Where can I put it? Should I put it in the place of done?

score 7 · Accepted Answer · answered Jul 27 '19 at 13:00

You can use addEndListener, or even onExited and onEntered callbacks.

With addEndListener:

function abc() {
  // blah
  // blah
  //blah
}

... // some code

<Transition
  addEndListener={(node, done) => {node.addEventListener('transitionend',(e) => {
    abc(e);
    done(e);
  }, false);}}>
  <MyComponent />
</Transition>

With onEntered and onExited:

<Transition
   onEntered={abc} onExited={abc}>
  <MyComponent />
</Transition>

An important thing of the second example: check the moment, when you want to get your callback called.

Where to put callback function in react-transition-group

1 Answers1