react-transition-group中回调函数放在哪里

Question

我想仅在转换结束后运行流程。

这里的文档说：

添加EndListener

添加自定义转换结束触发器。使用过渡 DOM 调用 节点和完成回调。允许更细粒度的过渡结束 逻辑。注意：如果提供的话，超时仍可用作后备措施。

addEndListener={(node, done) => {
  // use the css transitionend event to mark the finish of a transition
  node.addEventListener('transitionend', done, false);
}}

所以我这样使用它：

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

问题是我不明白在转换结束后将函数放在哪里执行。

如果这是我的职能：

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

我可以把它放在哪里？我应该把它放在

done

的位置吗？

Answer 1

您可以使用

addEndListener

，甚至

onExited

和

onEntered

回调。

与

addEndListener

：

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

... // some code

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

与

onEntered

和

onExited

:

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

第二个示例的一个重要事项：检查您想要调用回调的时刻。

Answer 2

addEndListener(node, done) {
    const isBack = node.classList.contains('back-exit');
    const isForward = node.classList.contains('forward-exit');

    if(isBack || isForward){
      const removeItem = () => {
        //onSlideEnd;
          done();
        // node.removeEventListener('transitionend', removeItem, false)
      }
      // node.addEventListener('transitionend', removeItem, false)
/*
 if the timeout is greater than 1.5s, the transitionend event is called 
 before the css transition is completed, this is some kind of bug. 
 It is better to use setTimeout
*/
      const idTimeout = setTimeout(() => {
        removeItem()
        clearTimeout(idTimeout);
      }, duration)
    }
  }