reactjs中的組件之間的轉換不起作用，css屬性未應用

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;

所以基本上這個工作都很好，組件甚至傳統與正確的類的IE如下：

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

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

但是我沒有看到過渡動畫，只是組件更改的延遲，我沒​​有看到淡入淡出的動畫。 上面的css只是沒有應用於組件（類是，css屬性不是，我放慢動畫到3秒來檢查這個並找到了。）。

如果您查看文檔中的示例，您會注意到動畫部分是通過在此處切換css類來處理的。

為什么我的組件過渡動畫不起作用？

PS我在我的應用程序中使用了eject命令，因此我的類來自import './surveyholder.css';是有原因import './surveyholder.css'; 是不是正確導入，因此我無法在我的開發工具中看到Inspect element - > styles中的類？

Answer 1

由於您使用的是css模塊，因此.fade-enter ， .fade-enter-active類會附加唯一標識符。

react轉換組搜索.fade-enter ， .fade-enter-active類，但是獲取.fade-enter_unique_id ， .fade-enter-active_unique_id類。

為了防止這種情況發生，請將ur 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">

我在你的項目上測試了這個解決方案

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地import ./surveyholder.css 。 請參閱此處的樣式加載器文檔