老师，你好，请问下为什么我应用了appear属性，但是第一次渲染的时候并未生效

子组件Test.js：

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;

子组件对应的样式文件Test.css
.alert-appear {
    opacity: 0;
}
.alert-appear-active {
    opacity: 1;
    transition: opacity 30000ms;
}

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