react-app-rewired与React Transition Group动画集成

常煦梦Vanessa

361人浏览 · 2025-10-20 05:34:04

常煦梦Vanessa · 2025-10-20 05:34:04 发布

react-app-rewired与React Transition Group动画集成

【免费下载链接】react-app-rewired Override create-react-app webpack configs without ejecting 项目地址: https://gitcode.com/gh_mirrors/re/react-app-rewired

你还在为Create React App项目中添加动画效果时不得不执行eject命令而烦恼吗？本文将展示如何使用react-app-rewired在不暴露Webpack配置的情况下，轻松集成React Transition Group实现流畅的组件过渡动画。读完本文你将学会：配置react-app-rewired自定义Webpack设置、安装并使用React Transition Group、实现常见的淡入淡出和滑动动画效果。

什么是react-app-rewired

react-app-rewired是一个允许你在不执行eject命令的情况下覆盖create-react-app Webpack配置的工具。它通过创建一个config-overrides.js文件来实现自定义配置，避免了eject后维护复杂配置的麻烦。

项目核心文件结构：

配置入口：config-overrides.js
Webpack重写逻辑：overrides/webpack.js
官方文档：README.md

准备工作

安装react-app-rewired

首先确保你的项目中已安装react-app-rewired：

npm install react-app-rewired --save-dev

修改package.json脚本

将package.json中的scripts部分修改为使用react-app-rewired：

"scripts": {
-  "start": "react-scripts start",
+  "start": "react-app-rewired start",
-  "build": "react-scripts build",
+  "build": "react-app-rewired build",
-  "test": "react-scripts test",
+  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

创建配置文件

在项目根目录创建config-overrides.js文件，基础结构如下：

module.exports = {
  webpack: function(config, env) {
    // 在这里自定义Webpack配置
    return config;
  },
  devServer: function(configFunction) {
    return function(proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      // 在这里自定义开发服务器配置
      return config;
    };
  }
};

安装React Transition Group

React Transition Group是React官方推荐的动画库，它提供了简单的组件来定义进入和退出过渡效果。

安装命令：

npm install react-transition-group --save

实现基本淡入淡出动画

创建动画组件

创建一个Fade组件，使用CSSTransition实现淡入淡出效果：

import React from 'react';
import { CSSTransition } from 'react-transition-group';
import './Fade.css';

const Fade = ({ in: inProp, children, timeout = 300 }) => (
  <CSSTransition
    in={inProp}
    timeout={timeout}
    classNames="fade"
    unmountOnExit
  >
    {children}
  </CSSTransition>
);

export default Fade;

添加CSS样式

创建对应的CSS文件Fade.css：

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

使用动画组件

在应用中使用Fade组件包裹需要添加动画的元素：

import React, { useState } from 'react';
import Fade from './Fade';

function App() {
  const [show, setShow] = useState(false);
  
  return (
    <div>
      <button onClick={() => setShow(!show)}>
        切换显示
      </button>
      <Fade in={show}>
        <div>这是一个带有淡入淡出动画的元素</div>
      </Fade>
    </div>
  );
}

export default App;

实现列表过渡动画

使用TransitionGroup可以为列表中的项目添加进入和退出动画：

import React, { useState } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import './List.css';

function List() {
  const [items, setItems] = useState([1, 2, 3]);
  
  const addItem = () => {
    setItems([...items, items.length + 1]);
  };
  
  const removeItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };
  
  return (
    <div>
      <button onClick={addItem}>添加项目</button>
      <TransitionGroup>
        {items.map((item, index) => (
          <CSSTransition
            key={item}
            timeout={500}
            classNames="item"
          >
            <div className="item">
              {item}
              <button onClick={() => removeItem(index)}>删除</button>
            </div>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </div>
  );
}

export default List;

对应的CSS样式List.css：

.item-enter {
  opacity: 0;
  transform: translateX(-100%);
}
.item-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 500ms, transform 500ms;
}
.item-exit {
  opacity: 1;
  transform: translateX(0);
}
.item-exit-active {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 500ms, transform 500ms;
}
.item {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
}

配置Webpack支持CSS模块化（可选）

如果你的项目使用CSS模块化，可以通过react-app-rewired进行配置。修改config-overrides.js：

module.exports = {
  webpack: function(config, env) {
    // 修改CSS加载器以支持模块化
    const cssLoader = config.module.rules.find(rule => 
      rule.test.toString().includes('css')
    );
    
    if (cssLoader) {
      cssLoader.use.forEach(loader => {
        if (loader.loader && loader.loader.includes('css-loader')) {
          loader.options = {
            ...loader.options,
            modules: {
              localIdentName: '[name]__[local]___[hash:base64:5]',
            },
          };
        }
      });
    }
    
    return config;
  }
};