根据状态（样式化组件）在两个动画之间切换

Question

我正在尝试根据父组件的状态触发动画。我已将数据正确传递给孩子（这是样式化的组件），但是我似乎无法使动画进行。我尝试过仅将动画分配给样式组件{Toggle}，但仍然看不到它。我认为这是样式化组件本身内部的道具传递问题，但不确定我怎么做错了。

Parent:
class MonthlyProgressChart extends Component {
state = {
showChart: false,
toggleSwitch: false
}

handleClick = () => {
this.setState(prevState => ({
  showChart: !prevState.showChart,
  toggleSwitch: !prevState.toggleSwitch
}));
}

render() {
console.warn('toggle switch is', this.state.toggleSwitch)
console.warn(this.state.showChart)
return (
 <Container>
     <Switch onClick={this.handleClick} toggle={this.state.toggleSwitch} />
        <CardBody>
          {this.state.showChart 
          ? <Bar data={genLineData()} options={options} />
          : <Line data={genLineData({ fill: false }, { fill: false })} 
             options={options} />
          } 
        </CardBody>
 </Container>


Child:
import React, { Component } from 'react'
import styled, { keyframes } from 'styled-components'

const Holder = styled.div`
  cursor: pointer
  position: relative
  height: 30px
  width: 62px
  border-radius: 15px
  background: #ffffff
  transition: 0.15s background ease-out
  `;

const Toggle = styled.div`
  position: absolute
  top: 2px
  left: 2px
  width: 26px
  height: 26px
  border-radius: 13px
  background: #426986

${Holder}:hover & {
    background: #3C94D6
}

`;

const toggleOn = keyframes`
  0% {
    left: 2px;
  }

  100% {
    left: 34px;
  }
`;

const toggleOff = keyframes`
  0% {
    left: 34px;
  }

  100% {
    left: 2px;
  }
`;

const ToggleSwitch = styled.div`
  animation: ${props => props.toggle ? `${ToggleOff}` : `${ToggleOn}`}

`;

const ToggleOn = styled.div`
    animation: ${toggleOn} 0.15s cubic-bezier(0.19, 1, 0.22, 1)
    left: 34px

`;
const ToggleOff = styled.div`
    animation: ${toggleOff} 0.15s cubic-bezier(0.19, 1, 0.22, 1)
    left: 2px

`;
export default class Switch extends Component {
  render() {
    console.warn(this.props.toggle)
    return (
      <div> 
        <Holder onClick={this.props.onClick}>
            <ToggleSwitch toggle={this.props.toggle}>
              <Toggle />
            </ToggleSwitch>     
        </Holder> 

      </div>
    );
  }
}