如何在React中通过CSS实现Logo从顶部下滑的动画效果？

首先修正你代码里的小问题：函数名应该是function App()而非function App.js。下面提供两种实现Logo从顶部下滑的方案，都适配你用的styled-components：

方法一：纯CSS关键帧动画（页面加载自动触发） #

不需要依赖React状态，直接通过CSS动画实现页面加载时Logo从视口外滑入的效果：

import React from 'react';
import styled from 'styled-components';
import img from './img/img.png';

const Logo = styled.div`
  background-image: url(${img});
  width: 100px;
  height: 100px;
  left: 0;
  position: fixed;
  /* 绑定下滑动画 */
  animation: slideDown 0.8s ease-out forwards;

  /* 定义下滑动画的关键帧 */
  @keyframes slideDown {
    from {
      top: -100px; /* 初始位置：视口顶部外，完全隐藏 */
    }
    to {
      top: 0; /* 最终位置：固定在视口顶部 */
    }
  }
`

function App() {
  return (
    <>
      <Logo />
    </>
  );
}

export default App;

说明： #

• forwards属性让动画结束后保持最终状态（不会回弹）
• 0.8s是动画时长，ease-out是缓动函数（先快后慢，更符合自然滑动的感觉）
• 如需调整下滑后的位置，修改to里的top值即可（比如top: 50px会滑到顶部下方50px处）

方法二：React状态控制动画（可自定义触发时机） #

如果需要在特定事件（比如按钮点击、数据加载完成）触发下滑，用React状态配合CSS过渡实现：

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import img from './img/img.png';

const Logo = styled.div`
  background-image: url(${img});
  width: 100px;
  height: 100px;
  left: 0;
  position: fixed;
  /* 开启top属性变化的平滑过渡 */
  transition: top 0.8s ease-out;
`

function App() {
  // 初始状态：Logo在视口外上方
  const [logoPosition, setLogoPosition] = useState('-100px');

  // 页面加载完成后触发下滑（也可替换为按钮点击等事件）
  useEffect(() => {
    setLogoPosition('0');
  }, []);

  return (
    <>
      <Logo style={{ top: logoPosition }} />
      {/* 示例：点击按钮重新触发下滑 */}
      <button onClick={() => {
        setLogoPosition('-100px');
        setTimeout(() => setLogoPosition('0'), 100);
      }}>重新下滑</button>
    </>
  );
}

export default App;

说明： #

• 通过useState控制top属性的值，配合transition实现平滑过渡
• 可以自由修改触发时机：比如把useEffect里的逻辑替换为按钮点击、路由切换等事件

内容的提问来源于stack exchange，提问作者Justin