ReactCSSTransitionGroup 不激活过渡答案

【问题标题】：ReactCSSTransitionGroup does not activate transitionReactCSSTransitionGroup 不激活过渡
【发布时间】：2016-03-30 22:00:12
【问题描述】：

ReactCSSTransitionGroup 对我没有任何作用，除了延迟我想要显示的元素。我试图让我的组件在页面加载时淡入。这是有问题的代码：

import React from 'react';
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';

...

render() {
    if(this.state.mounted) {
        var child = (
            <div>
                <h1>{this.state.title}</h1>
                <p>Description: {this.state.description}</p>
                <p>Language(s): {this.state.lang}</p>
            </div>
        );
    }
    else {
        var child = null;
    }
    return (
        <div className="container">
            <ReactCSSTransitionGroup transitionAppear={true} transitionAppearTimeout={1000} transitionName="puzzle" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
                {child}
            </ReactCSSTransitionGroup>
        </div>
    )
}

这是用 SASS 编写的 CSS：

.puzzle-appear {
    opacity: .01;
    .puzzle-appear-active {
        opacity: 1;
        transition: opacity 1000ms ease-in;
    };
};

.puzzle-enter {
    opacity: .01;
    .puzzle-enter-active {
        opacity: 1;
        transition: opacity 500ms ease-in;
    };
};

.puzzle-leave {
    opacity: 1;
    .puzzle-leave-active {
        opacity: .01;
        transition: opacity 300ms ease-in;
    };
};

我尝试了许多 Google 提供的东西，但都没有奏效。然而，一切似乎都井然有序。代码有什么问题？

【问题讨论】：

您是否在控制台中遇到任何错误？它是否有效？
对不起，我应该澄清一下。控制台中没有错误，但组件确实呈现，只是没有过渡。

标签： javascript css reactjs

【解决方案1】：

您的 SASS 代码建议将活动状态类应用于您的拼图元素内的元素，但我不认为是这种情况。

如果您在渲染时可以看到正在应用的类并且该位工作正常，那么这可能就是问题所在。将 -active 样式移出它们当前的嵌套位置。

【讨论】：

啊，就是这样。看来我还需要复习一下我的 SASS。谢谢！