使用 styled-components 反转 props 变化的转换

Question

我对道具更改上的两个元素进行动画处理：容器 div 以 max-height 滑入/滑出，div 的内容以 opacity 淡入/淡出。

问题是，我希望容器在“out”动画的内容之后进行动画处理，但我希望它出现在“in”动画的内容之前。目前，元素始终按相同的顺序进行：内容首先转换，然后是容器。这意味着内容会在容器滑入“in”动画之前出现。

我尝试过使用 styled-components 中的 reverse 属性和 keyframes ，但老实说，我对 CSS 动画很差，以至于我无法开始理解我需要什么改变。

这是当前代码：

Component.tsx

export default function Component() {
  const [showBanner, setShowBanner] = useState(true);

  const handleAccept = () => {
    setShowBanner(false);
  };

  const handleReject = () => {
    setShowBanner(false);
  };

  return (
    <StyledComponent $showBanner={showBanner}>
      <StyledText>
        // some text
      </StyledText>
      <StyledButtonsContainer>
        // some buttons
      </StyledButtonsContainer>
    </StyledComponent>
  );
}

Component.styles.tsx

export const StyledComponent = styled.div<{ $showBanner: boolean }>`
  &&& {
    position: absolute;
    z-index: ${zIndex("overlay")};
    display: flex;
    flex-direction: column;
    max-height: ${(props) => (props.$showBanner ? "100%" : "0")};
    height: 100%;
    width: 100%;
    background: ${(props) => props.theme.secondary};
    color: ${(props) => props.theme.white};
    transition: max-height 0.5s 0.5s ease;

    @media ${device.tablet} {
      border-radius: 0 0 2px 20px;
    }

    * { // targeting everything all of the contents
      opacity: ${(props) => (props.$showBanner ? "100%" : "0%")};
      transition: opacity 0.5s ease;
    }
  }
`;

Answer 1

我通过使用 $showBanner 属性控制 transition-delay 属性来对此进行排序。不过，我是通过 transition 简写完成的：

export const StyledCookieBanner = styled.div<{ $showBanner: boolean }>`
  &&& {
    position: absolute;
    z-index: ${zIndex("overlay")};
    display: flex;
    flex-direction: column;
    max-height: ${(props) => (props.$showBanner ? "100%" : "0")};
    height: 100%;
    width: 100%;
    background: ${(props) => props.theme.secondary};
    color: ${(props) => props.theme.white};
    transition: max-height 0.5s ${(props) => !props.$showBanner && "0.5s"}; // here

    @media ${device.tablet} {
      border-radius: 0 0 2px 20px;
    }

    * {
      opacity: ${(props) => (props.$showBanner ? "100%" : "0%")};
      transition: opacity 0.5s ${(props) => props.$showBanner && "0.5s"}; // here
    }
  }
`;

这会反转两个转换的延迟，从而有效地反转转换。