You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React项目滚动CSS动画在Netlify/Render部署后失效求助

avatar
开发者阿泽
2026-7-9
React + AOS 自定义动画部署后失效且元素不可见问题

问题详情

我用React开发网站，基于AOS滚动动画库和SCSS实现了两种盒子揭露式动画，但部署到Netlify、Render等平台后动画完全失效，添加动画的元素（比如About页面的标题和旁边的图片）直接不可见。部署站点链接：https://gulfmining-group.netlify.app/

相关SCSS代码 

@mixin box-reveal-animation {
  .box-reveal {
    display: inline-block;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    position: relative;
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;

    &::before {
      position: absolute;
      content: '';
      top: 0;
      left: -20px;
      right: 0;
      width: 130%;
      height: 110%;
      background: linear-gradient(90deg, #ADD039 63%, #ceeb71 78%, #d2e78b 100%);
      -webkit-transform-origin: left;
      -ms-transform-origin: left;
      transform-origin: left;
      transition: 0.8s ease-in;
    }

    &::before[data-aos="custom-box-animation"] {
      -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
      transform: scaleX(1);
    }
  }

  .box-reveal.aos-init.aos-animate {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
  }

  .box-reveal.aos-init.aos-animate::before {
    -webkit-transform: scaleX(0.05);
    -ms-transform: scaleX(0.05);
    transform: scaleX(0.05);
  }
}

@mixin black-box-reveal {
  .black-box-reveal {
    display: inline-block;
    -webkit-transition: 0.9s;
    transition: 0.9s;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    position: relative;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;

    &::before {
      position: absolute;
      content: '';
      inset: 0;
      width: 100%;
      height: 100%;
      background: #141414;
      -webkit-transform-origin: top;
      transform-origin: top;
      -webkit-transition: 0.9s ease-in;
      transition: 0.9s ease-in;
      -webkit-transition-delay: 1s;
      transition-delay: 1s;
    }

    &::before[data-aos="custom-black-box-reveal"] {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
    }
  }

  .black-box-reveal.aos-init.aos-animate {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  .black-box-reveal.aos-init.aos-animate::before {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

对应JSX代码 

<div className='AboutIntro'>
  <div className="container">
    <div className="row">
      <div className="left-col">
        <h2 className='box-reveal' data-aos="custom-box-animation" data-aos-offset="200">About US</h2>
        <p data-aos="fade" data-aos-duration="900">Founded in 2005, Gulf Mining Group (GMG) is a leading player in Oman's mineral industries. With a rich history of mining and mineral development, GMG's diverse interests span Chrome, Manganese, Marble, Limestone, and more.

          Driven by a commitment to harness Oman's mineral potential, GMG has grown rapidly to become one of Oman's largest mining companies. Discover our story and explore our journey on the full "About Us" page.</p>
        <a href="#">Read More</a>
      </div>
      <div className="right-col">
        <div className="image-container black-box-reveal" data-aos="custom-black-box-reveal" data-aos-duration="1000" data-aos-offset="300">
          <img src="https://images.unsplash.com/photo-1580420232349-3eefa50d2423?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1432&q=80" alt="" />
        </div>
      </div>
    </div>
  </div>
</div>

问题分析

  1. 初始状态强制隐藏：.box-reveal和.black-box-reveal默认设置transform: scaleX(0)/scaleY(0)，而AOS的aos-init类需等脚本加载后才会添加。生产环境中CSS先于JS生效，导致元素一开始就不可见，若AOS初始化延迟或失败，元素无法恢复显示。
  2. 自定义动画未注册：AOS无法自动识别data-aos的自定义值，必须显式注册动画名称，否则不会触发aos-animate类。
  3. CSS优化误删规则：托管平台的构建压缩可能误删伪元素的过渡规则，或导致选择器优先级失效。

解决方案

1. 调整初始可见性逻辑

修改SCSS，仅在AOS初始化后应用隐藏状态，确保元素默认可见：

@mixin box-reveal-animation {
  .box-reveal {
    display: inline-block;
    position: relative;
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;

    // 仅AOS初始化后才隐藏未触发动画的元素
    &.aos-init:not(.aos-animate) {
      transform: scaleX(0);
      -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
    }

    &::before {
      position: absolute;
      content: '';
      top: 0;
      left: -20px;
      right: 0;
      width: 130%;
      height: 110%;
      background: linear-gradient(90deg, #ADD039 63%, #ceeb71 78%, #d2e78b 100%);
      -webkit-transform-origin: left;
      -ms-transform-origin: left;
      transform-origin: left;
      transition: 0.8s ease-in;
      // 伪元素默认隐藏
      transform: scaleX(0);
      -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
    }
  }

  .box-reveal.aos-animate {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
  }

  .box-reveal.aos-animate::before {
    -webkit-transform: scaleX(0.05);
    -ms-transform: scaleX(0.05);
    transform: scaleX(0.05);
  }
}

@mixin black-box-reveal {
  .black-box-reveal {
    display: inline-block;
    position: relative;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;

    // 仅AOS初始化后才隐藏未触发动画的元素
    &.aos-init:not(.aos-animate) {
      -webkit-transform: scaleY(0);
      transform: scaleY(0);
    }

    &::before {
      position: absolute;
      content: '';
      inset: 0;
      width: 100%;
      height: 100%;
      background: #141414;
      -webkit-transform-origin: top;
      transform-origin: top;
      -webkit-transition: 0.9s ease-in;
      transition: 0.9s ease-in;
      -webkit-transition-delay: 1s;
      transition-delay: 1s;
      // 伪元素默认隐藏
      transform: scaleY(0);
      -webkit-transform: scaleY(0);
    }
  }

  .black-box-reveal.aos-animate {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }

  .black-box-reveal.aos-animate::before {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

2. 注册AOS自定义动画

在项目入口文件（如index.js/App.js）中显式注册自定义动画：

import AOS from 'aos';
import 'aos/dist/aos.css';

AOS.init({
  duration: 800,
  offset: 200,
  // 注册自定义动画名称
  animations: [
    { name: 'custom-box-animation' },
    { name: 'custom-black-box-reveal' }
  ]
});

3. 组件内确保AOS正确初始化

如果在组件中使用，通过useEffect保证DOM加载完成后初始化AOS：

import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';

function AboutPage() {
  useEffect(() => {
    AOS.init({
      duration: 800,
      offset: 200,
      animations: [
        { name: 'custom-box-animation' },
        { name: 'custom-black-box-reveal' }
      ]
    });
    // 窗口 resize 时刷新AOS计算
    const handleResize = () => AOS.refresh();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // 组件JSX代码...
}

4. 检查构建配置

  • CRA无需额外配置，默认保留必要CSS规则；
  • Vite用户检查vite.config.js，避免过度开启CSS tree-shaking；
  • 确保SCSS混合宏被正确引用，防止被优化工具误删。

验证步骤

  1. 本地执行npm run build，预览构建后的文件确认动画正常；
  2. 部署后打开开发者工具，检查元素是否添加了aos-init和aos-animate类；
  3. 查看CSS面板，确认伪元素的过渡、变换属性未丢失。

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.09 23:32:04