老师，你好，如果我在css中只添加了.fade-appear{opacity: 0;}，没有添加.fade-appear-active，为什么页面上第一次渲染出来时hello会出现闪烁的问题。

组件代码

import React, { Component } from "react";
import { CSSTransition } from "react-transition-group";

import "./Test.css";

class Test extends Component {
    constructor(props) {
        super(props);

       this.state = {
            show: true
        };
    }

    render() {
        return (
            <React.Fragment>
                <CSSTransition
                    in={this.state.show}
                    timeout={10000}
                    classNames="alert"
                    appear={true}
                >
                    <span>hello world</span>
                </CSSTransition>

                <button onClick={this.handleOnClick.bind(this)}>toggle</button>
            </React.Fragment>
           
        );
    }

    handleOnClick() {
        this.setState((prevState) => ({
            show: !prevState.show
        }));
    }

    handleOnEnter() {
        console.log("onEnter");
    }

}

export default Test;

css代码
.alert-appear {
    opacity: 0;
}
.alert-appear-active {
    
}

.alert-enter {
    opacity: 0;
  }

.alert-enter-active {
    opacity: 1;
    transition: opacity 30000ms;
}

.alert-enter-done {
    opacity: 1;
}

.alert-exit {
    opacity: 1;
}
.alert-exit-active {
    opacity: 0;
    transition: opacity 300ms;
}