ReactCSSTransitionGroup不激活转换

Question

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;
    };
};

我试过很多谷歌提供的东西，但都没有用。然而，一切似乎都井井有条。密码有什么问题吗？

Answer 1

SASS代码建议将活动状态类应用于益智元素中的一个元素，但我认为情况并非如此。

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