将回调函数放在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 ?

Answer 1

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.