样式组件初始道具值 - 三元/开关类型

Question

下面我有一个标签，加载时应该没有动画，根据props.moveLabelUp === true（输入焦点为true）应该标注up和props.moveLabelUp === false（输入焦点为false）动画标签向下但在初始加载时应该根本没有动画。

我将props.moveLabelUp设置为null并提出以下解决方案：

请告知是否有更好的方法来编码：

const StyledLabel: StyledComponentClass = styled(Label) `
  position: absolute;
  top: 9px;
  left: 5px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  background: white;
  color: ${props => props.moveLabelUp ? 'blue' : 'black'}
  transform: none;

  animation: ${props => props.moveLabelUp ? `
    ${moveLabelUp} .2s forwards ease;
    ` : `
    ${moveLabelBack} .2s forwards ease;
  `
}`;

const StyledLabelOverride = StyledLabel.extend`
  animation: ${props => props.moveLabelUp === null && `none`}
`;

我们这里有动画：

const moveLabelUp = keyframes`
  from {
    transform: translateY(0px); font-size: .9em;
  }

  to {
    transform: translateY(-16px); font-size: .8em;
  }
`;

const moveLabelBack = keyframes`
  from {
    transform: translateY(-16px); font-size: .8em;
  }

  to {
    transform: translateY(0px); font-size: .9em;
  }
`;

感谢。