React中爱心下落动画引发页面抖动、层级异常问题求助

你的问题源于三个关键细节的缺失或不匹配：body样式未做视口适配、容器选择器不匹配、定位上下文缺失，以下是针对性修复：

1. 修复页面抖动与滚动条问题 #

原生示例中body设置了margin:0、width:100vw、height:100vh和overflow:hidden，但你的React项目里的body样式缺少这些属性，导致爱心动画触发视口溢出，出现滚动条和抖动。

修改CSS中body的样式：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw; /* 强制占满视口宽度 */
    height: 100vh; /* 改为100vh，占满整个视口高度 */
    margin: 0; /* 移除浏览器默认margin */
    overflow: hidden; /* 隐藏溢出内容，避免滚动条 */
    position: relative; /* 作为绝对定位元素的父级上下文 */
    background: pink;
}

2. 修复爱心在容器后方的显示问题 #

你的React组件里容器用的是className="container"，但CSS里写的是#container（ID选择器），导致容器的z-index:10完全不生效，爱心的z-index:0无法被正确层级覆盖。

步骤1：匹配容器选择器 #

将JSX里的容器类名改为ID（或把CSS里的#container改为.container，二选一即可）：

return (
    <div id="container"> {/* 把className改为id */}
        <div>
            <h1 className="header_text">Test</h1>
        </div>
    </div>
);

步骤2：优化爱心动画属性 #

给爱心的动画添加forwards，确保动画结束后保持最终状态直到被移除：

.fa-heart {
    color: rgb(255, 255, 255);
    font-size: 25px;
    position: absolute;
    animation: heartMove linear 1 forwards; /* 新增forwards */
    top: -10vh;
    z-index: 0;
}

3. 优化爱心清理逻辑（可选） #

原有的清理逻辑是定时检查数量，可优化为动画结束后自动移除，减少不必要的DOM查询：

const createHeart = () => {
  const heart = document.createElement("div");
  heart.className = "fas fa-heart";
  heart.style.left = `${Math.random() * 100}vw`;
  const duration = `${Math.random() * 3 + 2}s`;
  heart.style.animationDuration = duration;
  document.body.appendChild(heart);
  // 动画结束后自动清理
  setTimeout(() => heart.remove(), parseFloat(duration) * 1000);
};

此修改可直接去掉removeInterval定时器，降低性能消耗。

最终完整代码示例 #

React组件代码 #

import React, { useEffect } from 'react';
import './style.css';

const Test = () => {
  useEffect(() => {
    const createHeart = () => {
      const heart = document.createElement("div");
      heart.className = "fas fa-heart";
      heart.style.left = `${Math.random() * 100}vw`;
      const duration = `${Math.random() * 3 + 2}s`;
      heart.style.animationDuration = duration;
      document.body.appendChild(heart);
      setTimeout(() => heart.remove(), parseFloat(duration) * 1000);
    };

    const heartInterval = setInterval(createHeart, 100);

    return () => {
      clearInterval(heartInterval);
      // 组件卸载时清理所有剩余爱心
      document.querySelectorAll(".fa-heart").forEach(heart => heart.remove());
    };
  }, []);

  return (
    <div id="container">
      <div>
        <h1 className="header_text">Test</h1>
      </div>
    </div>
  );
}

export default Test;

CSS关键样式 #

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    position: relative;
    background: pink;
}

#container {
    min-width: 30%;
    min-height: 30%;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0);
    box-shadow: 5px 5px 5px 2px black;
    border-radius: 20px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 30px;
    padding: 5px 10px;
    font-family: "Poppins",sans-serif;
}

.fa-heart {
    color: rgb(255, 255, 255);
    font-size: 25px;
    position: absolute;
    animation: heartMove linear 1 forwards;
    top: -10vh;
    z-index: 0;
}

@keyframes heartMove {
    0%{
        transform: translateY(-10vh);
    }
    100%{
        transform: translateY(110vh);
    }
}

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