单击时更新时，CSS转换不在react循环内工作

Question

点击时，我有一个使用css transform 1.45s ease-out在水平方向移动的卡片列表。这是我的卡片组件

<CardList transition={this.state.transition} translateValue={this.state.translateValue} arrayOfCards={this.state.arrayOfCards} handleClick={this.handleClick}/>

这里我遍历卡片列表

function CardList(props) {
            const cards = props.arrayOfCards;
            const handleClick = props.handleClick;
            const translateValue = props.translateValue;
            const transition = props.transition;
            const cardList = cards.map(function(card, index) {
                return (<div className="cards-container" key={index} onClick={handleClick} style={{padding: '20px', transform: `translateX(${translateValue}px)`, transition: `${transition}`}}>
                    <Card style={{ width: 170, height: 200 }}>
                        <p>Card content {card}</p>
                    </Card>
                </div>);
            });
            return cardList;
        }

在handle上我更新转换和转换值。

handleClick() {
    let cards = this.state.arrayOfCards;
    //arrayOfCards logic goes here
    this.setState({
        arrayOfCards: arrayOfCards,
        translateValue: -210,
        transition: 'transform 1.45s ease-out'
    });
}

我不知道为什么css不在循环内部工作。请帮帮我。