[英]transition between components in reactjs not working and css properties not being applied
I have the following react component, that basically serves up all the other components , i wanted some animation between all the component trasitions, so now my component looks like so , I am using the react-transition-group
, 我有以下反应组件,基本上提供所有其他组件,我想在所有组件trasition之间的一些动画,所以现在我的组件看起来像这样,我使用
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;
So basically this works all fine , the components even tradition with the right class's IE the below: 所以基本上这个工作都很好,组件甚至传统与正确的类的IE如下:
.fade-enter {
opacity: 0;
z-index: 1;
transition: opacity 3s ease-in;
}
.fade-enter.fade-enter-active {
opacity: 1;
}
However i don't see the transition animation , just a delay in the changing of the components , i don't see the fade animation. 但是我没有看到过渡动画,只是组件更改的延迟,我没有看到淡入淡出的动画。 The css above is just not applied to the components (the classes are , the css properties are not , i slowed down the animation to 3 seconds to check this and found out.).
上面的css只是没有应用于组件(类是,css属性不是,我放慢动画到3秒来检查这个并找到了。)。
If you checkout the example in the doc's you will notice that the animation part is handled by toggling css classes HERE . 如果您查看文档中的示例,您会注意到动画部分是通过在此处切换css类来处理的。
Why is my component transition animation not working ? 为什么我的组件过渡动画不起作用?
PS i have used the eject
command in my app , so is there a reason my classes from import './surveyholder.css';
PS我在我的应用程序中使用了
eject
命令,因此我的类来自import './surveyholder.css';
是有原因import './surveyholder.css';
are ot being imported properly and hence i am unable to see the classes in Inspect element
-> styles
in my dev tools ? 是不是正确导入,因此我无法在我的开发工具中看到
Inspect element
- > styles
中的类?
Since u are using css modules, the .fade-enter
, .fade-enter-active
class gets appended with unique identifier. 由于您使用的是css模块,因此
.fade-enter
, .fade-enter-active
类会附加唯一标识符。
The react transition group searches for .fade-enter
, .fade-enter-active
class, but instead gets .fade-enter_unique_id
, .fade-enter-active_unique_id
class. react转换组搜索
.fade-enter
, .fade-enter-active
类,但是获取.fade-enter_unique_id
, .fade-enter-active_unique_id
类。
In order to prevent this from happening, wrap ur css class in :global(.classname)
为了防止这种情况发生,请将ur css类包装在
:global(.classname)
Add this to ur surveyholder.css file 将此添加到您的surveyholder.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;
}
And also update the timeout value in surveyholder.js , 并且还更新surveyholder.js中的超时值,
<CSSTransition key={location.key} timeout={300} classNames="fade">
I tested this solution on ur project. 我在你的项目上测试了这个解决方案
You may be correct. 你可能是对的。 Since you ejected the create-react-app, you no longer are using the style-loader package.
由于您弹出了create-react-app,因此您不再使用样式加载程序包。 Try to
npm install --save-dev style-loader
尝试
npm install --save-dev style-loader
Also in your webpack.config.js include this in your module object: 另外在你的webpack.config.js中包含这个在你的模块对象中:
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
You should then be able to import ./surveyholder.css
without problem. 然后,您应该能够
import ./surveyholder.css
地import ./surveyholder.css
。 See style-loader documentation here 请参阅此处的样式加载器文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.