2

我正在尝试访问componentWillMount钩子以淡出不是过渡<Home>组件的子元素的画布元素。（<Home>本身的动画按预期工作。）

<ReactCSSTransitionGroup transitionName="screenTrans" transitionEnterTimeout={200} transitionLeaveTimeout={3000}>
    <Home key={'home'} />
</ReactCSSTransitionGroup>

主页.js：

export default class Home extends React.Component {
    ...
    componentWillLeave( callback ) {
        console.log( "am i getting called?" ) // no!
        this.fadeOutCanvas();
    }
}

我错过了什么？谢谢...

4

1 回答 1

2

很晚的答案，但我现在面临同样的问题。

问题是您使用ReactCSSTransitionGroup的不会像ReactTransitionGroup（不同的组件）那样调用回调。问题是您需要一个兼具两者的组件（设置 css 并调用您的回调）

从文档：

使用 ReactCSSTransitionGroup 时，您的组件无法在过渡结束时收到通知，也无法围绕动画执行任何更复杂的逻辑。如果您想要更细粒度的控制，您可以使用较低级别的 ReactTransitionGroup API，它提供了执行自定义转换所需的钩子。

检查了一下，我找不到任何东西，所以我将编写自己的组件并希望开源它！

于 2016-05-19T12:10:11.450 回答