带有样式组件的react-transition-group没有动画

Question

我尝试用styled-component给react-transition-group设置动画，但未成功。这是我的Component.js，我只想在此位置设置动画：

import React from 'react'
import styled from 'styled-components'
import {Transition} from 'react-transition-group'

const Container = styled.li`
  ...styles...
  &.component-exiting {
    opacity: 1;
    max-height: 1000px;
    transition: opacity 1000ms, max-height 500ms 1000ms;
  }
  &.component-exited {
    opacity: 0;
    max-height: 0px;
  }
`

class Component extends React.Component {

  state = {
    hasBeenClicked: false
  }

  render() {
    return (
      <Transition
        timeout={1500}
        in={!this.state.hasBeenClicked}>
        {status => 
          <Container
            className={`component-${status}`}
            onClick={() => this.setState({hasBeenClicked: true})}>
            {...stuff...}
          </Container>
        }
      </Transition>
    )
  }
}

我希望动画持续1.5秒（timeout={1500}）。但是，当我单击时，在这1.5秒钟内什么都没有发生，然后该组件就消失了。

有什么想法我做错了吗？