CODEWITHSUNDEEP
cssreactjsreact-routercss-animations
Alexander Solonik
Alexander Solonik

Reputation: 10230

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 , 

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 I.E. 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 ?

P.S. 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 ?

Upvotes: 3

Views: 1088

Answers (2)

Gautam Naik
Gautam Naik

Reputation: 9348

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.

Upvotes: 1

MARyan87
MARyan87

Reputation: 1806

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

Upvotes: 0

Related Questions