Reactjs 我怎样才能让这个转换工作？

我有一个React组件列表，试图在加载主页时通过淡入来延迟在循环中呈现ListItem组件，但由于某些原因，这不起作用-看起来我遗漏了什么？ 下面的代码只会使ListItem元素出现，而不会在etc中褪色

export default class List extends Component {

    constructor(props) {
        super(props);
        this.state = {items: [
            {
                "id": 1,
                "tag":"tag1",
                "date": "1/2/3",
            },
            {
                "id": 2,
                "tag":"tag2",
                "date": "1/2/3",
            },
            {
                "id": 3,
                "tag":"tag3",
                "date": "1/2/3",
            },
            ]
        }
    }


    render() {
        return (
            <TransitionGroup>
                {this.state.items.map((item,index) => (
                        <CSSTransition
                            key={item.id}
                            timeout={1000}
                            classNames="fade"
                            >
                                <ListItem
                                    dataPoint={item}
                                />
                        </CSSTransition>
                ))};
            </TransitionGroup>
        )

    } }

.fade-enter{
    opacity: 0;
    visibility: hidden;
    transition: all ease 1s;
}

.fade-enter.fade-enter-active{
    opacity: 1;
    visibility: visible;
    transition: all ease 1s;
}

.fade-exit {
    visibility: visible;
    opacity: 0;
}

.fade-exit.fade-exit-active{
    opacity: 0;
    visibility: hidden;
    transition: all ease 1s;
}