Question

当使用样式组件检查输入时，我正在尝试为线设置动画。

我尝试使用（a）和不使用（b）关键帧，并且都返回（c）：

(a)

import styled, { keyframes } from 'styled-components';

const Input = styled.input``

const NavIconLine = styled.span`
  display: block;
  position: absolute;
  height: 3px;
`;

const Animation = keyframes`
    from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 70%;
    }

    to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 100%;
    }
`;

const NavIconLine2 = styled(NavIconLine)`
  width: 70%;

  ${Input}:checked ~ & {
    animation: ${Animation} 0.15s ease-in-out;
  }
`;

(b)

import styled from 'styled-components';

const Input = styled.input``

const NavIconLine = styled.span`
  display: block;
  position: absolute;
  height: 3px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.15s ease-in-out;
  transition: 0.15s ease-in-out;
`;

const NavIconLine2 = styled(NavIconLine)`
  width: 70%;

  ${Input}:checked ~ & {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 100%;
  }
`;

(c)

function Component {
  return (
    <Input type="checkbox" id="menu" />
    <NavIcon for="menu">
      <NavIconLine1 />
    </NavIcon>
  )
}

我认为也许问题在于“ $ {Input}：checked〜＆{...}”中元素的定位，因为“〜＆”是指同级而不是父级的同级？如果是这样，是否可以定位？

谢谢！

Answer 1

已解决：

将条件写在后代上的即时性，是在父级的同级上写的：

const Input = styled.input`
  display: whatever;

  :checked + ${NavIcon} {
    ${NavIconLine1} {
      animation: whatever;
    }
  }
`;

如何有条件地使用样式化组件制作动画

1 个答案: