卸载/离开时对React组件进行动画处理 [英] Animate React component when unmount/leave

问题描述

我想在组件离开时使用Velocity淡出组件。我正在拨打回叫电话，但没有动画。下面的代码有什么问题？

I want to use Velocity to fade out a component when the component leaves . I'm calling the callback but there is no animation. What is wrong with the code below?

export class Foo extends Component {

      componentWillEnter(cb) {
        cb();
      }

      componentWillLeave(cb) {
         const node = findDOMNode(el);
         Velocity(node, { opacity: 0 }, { duration:200 });
         cb();
      }
}

推荐答案

在 GSAP帖子。回调需要作为完整功能传递给Velocity。

Found it on a GSAP post. The callback needs to be passed to Velocity as the complete function.

    export class Foo extends Component {
      componentWillEnter(cb) {
        cb();
      }
      componentWillLeave(cb) {
         const node = findDOMNode(el);
         Velocity(node, { opacity: 0 }, { duration:200, complete: cb });
      }

    ...
    }

这篇关于卸载/离开时对React组件进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！