Reactjs 中的组件之间的转换不起作用，CSS 属性未应用

Question

我有以下反应组件，基本上提供所有其他组件，我想要在所有组件之间有一些动画，所以现在我的组件看起来像这样，我正在使用react-transition-group，

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;

所以基本上这都可以正常工作，组件甚至传统与正确的类，即如下：

.fade-enter {
opacity: 0;
z-index: 1;
transition: opacity 3s ease-in;    
}
.fade-enter.fade-enter-active {
opacity: 1;
}

但是我没有看到过渡动画，只是组件更改的延迟，我没有看到淡入淡出动画。上面的 css 只是没有应用于组件(类是，css 属性不是，我将动画减慢到 3 秒以检查这一点并发现。)。

如果您查看文档中的示例，您会注意到动画部分是通过在此处切换 css 类来处理的。

为什么我的组件过渡动画不起作用？

附言我已经在我的应用程序中使用了eject命令，那么是否有原因我的类import './surveyholder.css';没有被正确导入，因此我无法在我的开发工具中看到Inspect element->styles中的类？

Answer 1

由于您使用的是 css 模块，因此.fade-enter、.fade-enter-active类会附加唯一标识符。

反应转换组搜索.fade-enter、.fade-enter-active类，但得到.fade-enter_unique_id、.fade-enter-active_unique_id类。

为了防止这种情况发生，请将您的 css 类包装在:global(.classname)

将其添加到您的调查员.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;
}

并更新调查员.js中的超时值，

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

我在您的项目中测试了此解决方案。

Answer 2

你可能是对的。 由于您弹出了 create-react-app，因此您不再使用 style-loader 包。 尝试npm install --save-dev style-loader

同样在你的 webpack.config 中.js把它包含在你的模块对象中：

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

然后，您应该能够毫无问题地import ./surveyholder.css。 在此处查看样式加载器文档