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

Posted 2023-02-22

【中文标题】reactjs 中的组件之间的转换不起作用并且没有应用 css 属性

【英文标题】：transition between components in reactjs not working and css properties not being applied

【发布时间】：2018-09-21 23:43:05

【问题描述】：

我有以下 react 组件，它基本上为所有其他组件提供服务，我希望在所有组件转换之间有一些动画，所以现在我的组件看起来像这样，我正在使用 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'; 的类没有被正确导入，因此我无法看到@ 中的类是有原因的987654328@ -> styles 在我的开发工具中？

【问题讨论】：

您能分享一下您的文件结构吗？

在 codepen 或 jsfiddle 上有一个工作示例会非常有帮助

@grammar 不知道怎么做，这里是 github 链接，你可以通过运行npm install 然后npm start 来检查它。附言在答案下方查看我的评论。

Github 项目链接？

@GautamNaik --> github.com/gautamz07/cs-survey，对不起，我的错

【参考方案1】：

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

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

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

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

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

【讨论】：

@Danm 谢谢.. 超级棒，会试试这个！非常感谢！

【参考方案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。 请参阅样式加载器文档here

【讨论】：

尝试了您的解决方案，但由于某种原因它不起作用。有趣的是，如果我将 webpack.config.dev.js 文件 localIdentName: '[name]__[local]__[hash:base64:5]' 中的以下行更改为以下 `localIdentName: '[local]'`，它工作正常，原因很明显，但这与其他组件 css 不同造型！