如圖，明明添加的元素是 “測試10” ，過渡卻出現(xiàn)在了 “娛樂” 元素上，這是怎么回事，代碼在下面，

.fade-appear{
  opacity: 0.01;
}
.fade-appear.fade-appear-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.fade-enter {
  opacity: 0.01;
}

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

.fade-leave {
  opacity: 1;
}

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

import React from 'react'
import {connect} from 'react-redux'
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

import style from './style.scss'

import {removeCate} from '../actions.js'
import Item from './item.js'


const List = ({cate, children, onRemoveCate}) => {
    return (
        <ul className={style.cate}>
            <CSSTransitionGroup
                transitionName={{
                    enter: `${style['fade-enter']}`,
                    enterActive: `${style['fade-enter-active']}`,
                    leave: `${style['fade-leave']}`,
                    leaveActive: `${style['fade-leave-active']}`,
                    appear: `${style['fade-leave']}`,
                    appearActive: `${style['fade-leave-active']}`
                }}
                transitionAppear={true}
                transitionAppearTimeout={500}
                transitionEnterTimeout={500}
                transitionLeaveTimeout={300}
            >
                {
                    cate.map((item, index) => (
                        <Item 
                            key={index} 
                            title={item.title}
                            onRemove={() => onRemoveCate(item.id)}
                        />
                    ))
                }
            </CSSTransitionGroup>
            {children}
        </ul>
    )
}