reactjs中的组件不工作和css属性未应用之间的转换

我有下面的react组件，它基本上服务于所有其他组件，我想要在所有组件之间传输一些动画，所以现在我的组件看起来是这样的，我正在使用

react转换组

import React, { Component } from 'react';
import './surveyholder.css';
import Welcome from './../components/welcome/welcome';
import Generalinfo from './../components/generalinfo/generalinfo';
import Preferences from './../components/preferences/preferences';
import Navigation from './../UI/navigation/navigation';
import { Route , BrowserRouter , Switch } from 'react-router-dom'; 
import { CSSTransition , TransitionGroup } from 'react-transition-group';


class Surveyholder extends Component {
  render() {
    return (
      <BrowserRouter>
        <Route render={ ({ location }) => (
          <div className="App">
            <Navigation />
            <TransitionGroup>
              <CSSTransition key={location.key}  timeout={3000} classNames="fade">
                <Switch location={ location }>
                  <Route path="/" exact component={ Welcome } />  
                  <Route path="/generalinfo" exact component={ Generalinfo } />
                  <Route path="/preferences" exact component={ Preferences } />
                </Switch>  
              </CSSTransition>    
            </TransitionGroup>          
          </div>
          )} />
      </BrowserRouter>
    );
  }
}

export default Surveyholder;

但是我没有看到过渡动画，只是组件更改的延迟，我没有看到淡入淡出的动画。上面的css只是没有应用到组件上（类是，css属性不是，我把动画的速度减慢到3秒来检查这一点并发现了）

如果您在文档中签出该示例，您将注意到动画部分是通过切换css类来处理的

为什么我的组件转换动画不工作

---

p.S.我已经在我的应用程序中使用了

eject

命令，那么我的类从

import./surveyholder.css'导入是否有原因被正确导入，因此我无法在我的开发工具中查看
Inspect element
->
样式中的类？
您可能是正确的。由于您弹出了CreateReact应用程序，因此不再使用样式加载程序包。尝试
npm安装--保存开发风格的加载程序

在您的webpack.config.js中，还应在模块对象中包含以下内容：

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }

然后您应该能够导入
。/surveyholder.css

，而不会出现问题。

---

请参阅样式加载器文档

因为您使用的是css模块，

.fade-enter

，

.fade-enter-active

类将附加唯一标识符

react转换组搜索

.fade-enter

，

.fade-enter-active

类，但获取

.fade-enter\u unique\u id

，

.fade-enter-active\u unique\u id

类

为了防止这种情况发生，请在

：global（.classname）

将此添加到ursurveyholder.css文件中

:global(.fade-enter) {
  opacity: 0.01;
}
:global(.fade-enter-active) {
  opacity: 1;
  transition: all 300ms ease-out;
}
:global(.fade-exit) {
  opacity: 1;
}
:global(.fade-exit-active) {
  opacity: 0.01;
  transition: all 300ms ease-out;
}

并更新surveyholder.js中的超时值

 <CSSTransition key={location.key}  timeout={300} classNames="fade">

---

我在你的项目上测试了这个解决方案。

你能分享一下你的文件结构吗？如果有一个关于codepen或jsfiddle@grammar不知道怎么做，这里是github链接，您可以通过运行

npm install

然后

npm start

来检查它。另外，请在下面的答案中查看我的评论。Github项目链接？@GautamNaik-->，很抱歉，我的朋友尝试了您的解决方案，但由于某些原因，它不起作用。有趣的是，如果我将webpack.config.dev.js文件

localIdentName:'[name].[local].[hash:base64:5].

中的以下行更改为'localIdentName:'[local]'，效果很好，原因很明显，但这与其他组件css样式不同@谢谢。。超级棒，我会试试这个！谢谢你！

 <CSSTransition key={location.key}  timeout={300} classNames="fade">