基于styled-components实现footer在hidden为true时向下滑出动画的方法咨询

你不需要使用useEffect实现该逻辑，直接通过styled-components的props动态绑定动画规则即可，具体修改如下：

核心调整点 #

• 新增滑出动画的keyframes定义
• 在StyleCard中接收hidden属性，动态匹配对应的动画规则
• 新增animation-fill-mode: forwards配置，保证动画结束后停留在最后一帧状态，不会出现回弹
• 可添加初始transform配置，避免页面首次加载hidden为true时触发多余的滑出动画

完整修改后代码 #

import { useState } from 'react';
import styled from 'styled-components';
// 记得引入你用到的Navbar、Main、Card等组件

const StyleCard = styled.div`
  /* 初始状态默认隐藏，避免首次加载多余动画 */
  transform: translateY(100%);
  animation: ${props => props.hidden ? 'nav-unload' : 'nav-load'} 500ms ease forwards;

  @keyframes nav-load {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes nav-unload {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(100%);
    }
  }
`;

const Button = styled.button`
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
`;

function App() {
  const [footer, setFooter] = useState(true);

  return (
    <APPDIV>
      <Navbar />
      <Button onClick={() => setFooter(!footer)} variant="primary">
        Primary
      </Button>
      <Main />
      <StyleCard hidden={footer}>
        <Card.Header>Quote</Card.Header>
        <Card.Body>
          <blockquote className="blockquote mb-0">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
              posuere erat a ante.
            </p>
            <footer className="blockquote-footer">
              Someone famous in <cite title="Source Title">Source Title</cite>
            </footer>
          </blockquote>
        </Card.Body>
      </StyleCard>
    </APPDIV>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Y.D.Y