Question

我有以下反应组件，它基本上提供了所有其他组件，我想在所有组件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;

所以基本上这一切都很好，组件甚至传统与正确的班级的I.E.以下：

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

  .fade-enter.fade-enter-active {
    opacity: 1;
  }

然而，我没有看到过渡动画，只是延迟更换组件，我没有看到淡入淡出的动画。上面的css只是没有应用于组件（类是，css属性不是，我把动画放慢到3秒来检查这个并找到它。）。

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

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

PS 我在我的应用中使用了eject命令，因此我import './surveyholder.css';的课程是否正确导入，因此我无法看到Inspect element中的课程 - ＆gt;我的开发工具中styles？

Answer 1

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

反应过渡组会搜索.fade-enter，.fade-enter-active类，而是获取.fade-enter_unique_id，.fade-enter-active_unique_id类。

为了防止这种情况发生，请在:global(.classname)

中包装ur css类

将此添加到您的 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;
}

并更新 surveyholder.js ，

中的超时值

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

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

Answer 2

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

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

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

然后你应该可以import ./surveyholder.css没有问题。请参阅style-loader文档here

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

2 个答案: