html - 输入字段在样式化组件中未正确设置动画

Question

我有以下样式组件 css。

const InputWrapper = styled.div`
    position: relative;
    direction: rtl;
`;
const Input = styled.input`
    width: 70px;
  direction: ltr;
  color: #7795ca;
  font-size: 1em;
  box-sizing: border-box;
  padding: 16px 20px 12px 57px;
  transition: width 0.4s ease-in-out;
  border-top: 0px solid #000;
  border-right: 0 solid #000;
  border-bottom: 2px solid #ffffff;
  border-left: 0 solid #000;
  background-color: #234ba5;
  cursor: pointer;
  z-index: 10;
  &::-webkit-input-placeholder {
    color: #7795ca;
  }
  &:focus {
    width: 100%;
    outline: none;
    cursor: text;
    }
`;
const Icon = styled.span`
    display: block;
    position: absolute;
    width: 17px;
  height: 20px;
    top: 14px;
  right: 30px;
  cursor: pointer;
    background-image: url(${searchIcon});
    background-repeat: no-repeat;
  &:active ~ ${Input} {
    width: 100%;
  }
`;

如您所见，我在输入元素聚焦时向输入元素添加了一些 css 过渡，效果很好。但是我还想要的是在 Icon 处于活动状态但不起作用时为输入设置动画。

下面是我的组件。

const Search = () => {
    return (
        <InputWrapper>
      <Icon></Icon>
            <Input type='text' name='Search' placeholder='Search all news' className='search' />
        </InputWrapper>
    );
}

我在下面创建了一个沙箱

https://codesandbox.io/s/zealous-margulis-rqveo?file=/src/App.js

标签： htmlcssstyled-components