React.js中仅用JavaScript和CSS能否实现自定义动画及实现方法咨询

首先可以明确：在React.js开发环境中，完全可以仅使用原生JavaScript和CSS从零完成所有自定义动画开发，不需要依赖任何第三方动画库，React本身的特性和原生Web能力完全兼容该需求。

具体实现思路 #

CSS 实现方案（适合固定轨迹、低交互复杂度的动画） #

• 基于CSS Transition实现过渡动画：
  给目标元素设置transition属性定义过渡的属性、时长、缓动函数，通过React state控制元素的类名或者行内样式变化，浏览器会自动生成过渡帧完成动画。示例逻辑如下：
  定义样式：

  .modal {
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
  }
  .modal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  

  组件中绑定状态：

  const [isModalVisible, setIsModalVisible] = useState(false);
  // 渲染时动态绑定类名
  return <div className={`modal ${isModalVisible ? 'visible' : ''}`}>弹窗内容</div>
  

  只要修改isModalVisible的状态即可自动触发弹窗的显隐过渡动画。
• 基于CSS @keyframes实现序列动画：
  提前用@keyframes定义好完整的动画帧序列，同样通过state控制类名触发动画的播放、暂停、重置，也可以通过React state动态绑定animation-duration、animation-delay等CSS属性调整动画参数。

JS 实现方案（适合复杂交互、实时计算轨迹的动画） #

• 核心基于原生requestAnimationFrame API实现逐帧渲染，用React的useRef获取DOM元素引用、存储动画中间状态，避免将动画中间值存入state触发不必要的组件重渲染，大幅提升动画性能。
• 典型应用场景如拖拽动画、鼠标跟随动画、粒子动画等：监听对应的用户交互事件（mousedown、mousemove、touchmove等），在事件回调中通过requestAnimationFrame批量更新元素的transform、opacity等属性即可实现流畅的自定义动画。
• 针对组件挂载/卸载的入场/退场动画，可以在useEffect中监听状态变化，先触发动画，等动画执行完成后再执行组件卸载逻辑，用setTimeout匹配动画时长即可实现。

性能优化建议 #

• 优先使用transform和opacity属性实现动画，这两个属性可以走浏览器的合成线程渲染，不会触发页面重排重绘，性能远高于修改width、height、top、left等布局属性。
• 高频更新的动画中间状态不要存入useState，用useRef存储即可，避免组件频繁重渲染带来的性能损耗。
• 复杂动画可以适当加硬件加速属性（如will-change: transform）提前通知浏览器优化，但不要滥用，避免内存占用过高。

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