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?

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

input：not（：placeholder-shown）：
input：not（[value =“”]）：

在我的情况下，输入的是TextBox的值。

MediaStreamTrack

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

1 个答案: