Question

我一直在阅读React Transition Group。 95％的材料谈论CSSTransitionGroup。我的理解是CSSTransitionGroup只是构建了TransitionGroup，它只提供与各种动画事件相对应的回调方法。

所以我将我的组件包装在TransitionGroup元素中并给它一个动画事件，但它永远不会被触发。

char mybuf[1024];
GetLocaleInfo(MAKELCID(LANG_NEUTRAL,SUBLANG_SYS_DEFAULT), LOCALE_SLANGUAGE, mybuf, sizeof(mybuf));

Answer 1

您可以在没有Transition的情况下使用CSSTransition或TransitionGroup，但如果没有其他人，则无法使用TransitionGroup。

来自react-transition-group docs：

<TransitionGroup>组件管理列表中的一组<Transition>组件。与<Transition>组件<TransitionGroup>一样，是一个状态机，用于管理组件随时间的安装和卸载。

...当项目被移除或添加到TodoList时，支柱将由<TransitionGroup>自动切换。

尝试将Test组件的渲染更改为以下内容：

render() {
    return (
        <Transition timeout={150}>
            {(status) => (
                <div className={`fade fade-${status}`}>
                    test
                <div>
            )}
        </Transition>
    )
}

反应过渡组

1 个答案: