反应样式的组件动画不起作用

Question

我正在尝试为表单文本字段和标签创建动画。 我希望能够将 LabelText 的位置更改为 TextBox 组件的顶部。 请让我知道我缺少什么，我输入的文本和标签重叠，即标签没有动画。 请求帮助！

样式化组件：

export const TextBox = styled.input`
  display: flex;
  width: 100%;
  height: 2em;
  border-radius: 5px;
  border: none;
  background: ${styles.backgroundGradient};
`;

export const LabelText = styled.label`
  position: absolute;
  top: 0;
  left: 0;
  font-size: 18px;
  line-height: 16px;
  pointer-events: none;
  transition: 0.5s;
  color: ${styles.formContentColor};
  ${TextBox}:focus ~ &,
  ${TextBox}:not([value=""]) ~ & {
    top: -1.5em;
    left: 0;
    color: ${styles.formContentColor};
    font-size: 20px;
  }
`;

export const InputWrapper = styled.div`
  position: relative;
  width: 60%;
`;

组件中的放置顺序

        <InputWrapper>
          <LabelText>Product Name</LabelText>
          <TextBox type="text" />
        </InputWrapper>

Answer 1

我阅读了@mosh feu 的评论以及关于stackoverflow 的其他答案。

Detect if an input has text in it using CSS -- on a page I am visiting and do not control?

有几种方法可以达到目的，即检查输入字段是否为空或是否在下面起草它们以供将来参考。

1. input:not(:placeholder-shown):
2. 输入：非（[value=""]）：

在我的例子中，输入是 TextBox 的值。

export const LabelText = styled.label`
  position: absolute;
  top: 1.5em;
  left: 0;
  font-size: 18px;
  line-height: 16px;
  pointer-events: none;
  transition: 0.6s;
  color: ${styles.formContentColor};
  ${TextBox}:focus ~ &,
  ${TextBox}:not(:placeholder-shown) ~ & {
    top: 0;
    left: 0;
    color: ${styles.formContentColor};
    font-size: 16px;
  }
`;