Question

我目前正在学习reactcss转换，由于某种原因，此处的示例和其他问题对我不起作用。我只是想创建一个简单的淡入淡出效果，即使我复制了this之类的示例，它也不起作用。我创建了一个名为“内容”的组件。在那里，我的渲染看起来像这样：

<div className="banner-timer" style={this.setBanner()}></div>
<div className="row mt-4">
    <div className="col">
        <div>
            <button>Add Item</button>
            <ReactCSSTransitionGroup
                transitionName="example"
                transitionEnterTimeout={500}
                transitionLeaveTimeout={300}
                transitionAppear={true}
                transitionAppearTimeout={5000}>
                <h1 className="text-center">testheader1</h1>
                <h1 className="text-center">testheader2</h1>
                <h1 className="text-center">testheader3</h1>
                <h1 className="text-center">testheader4</h1>
                <h1 className="text-center">testheader5</h1>
            </ReactCSSTransitionGroup>
        </div>
    </div>
</div>
<p className="color-light" style={{height: '300px'}}>this is a test</p>

之后，我将App.css文件放入其中，并添加了动画的类：

.example-enter {
    opacity: 0.01;
}

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

.example-leave {
    opacity: 1;
}

.example-leave.example-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
}

.example-appear {
    opacity: 0.01;
}

.example-appear.example-appear-active {
    opacity: 1;
    transition: opacity .5s ease-in;
}

如果我现在启动服务器，我会在5秒钟内看到将设置所有类。但是效果不会显示。如果我在dom控制台中更改类，则将在5秒钟内显示动画。看起来transition属性无法在初始通话中使用。

React CSS Transition不会显示动画

0 个答案: