transition between components in reactjs not working and css properties not being applied

Question

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 ,

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:

.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.).

If you checkout the example in the doc's you will notice that the animation part is handled by toggling css classes HERE .

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'; are ot being imported properly and hence i am unable to see the classes in Inspect element -> styles in my dev tools ?

Answer 1

Since u are using css modules, the .fade-enter , .fade-enter-active class gets appended with unique identifier.

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.

In order to prevent this from happening, wrap ur css class in :global(.classname)

Add this to ur surveyholder.css file

: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 ,

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

I tested this solution on ur project.

Answer 2

You may be correct. Since you ejected the create-react-app, you no longer are using the style-loader package. Try to npm install --save-dev style-loader

Also in your webpack.config.js include this in your module object:

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

You should then be able to import ./surveyholder.css without problem. See style-loader documentation here