add transition group

Author: Swolfeyes

package-lock.json

@@ -80,6 +80,7 @@
     "react-dom": "^16.6.0",
     "react-redux": "^6.0.0",
     "react-svg-inline": "^2.1.1",
+    "react-transition-group": "^1.2.1",
     "recursive-readdir": "^2.2.2",
     "redux-thunk": "^2.3.0",
     "reflect-metadata": "^0.1.12",

package.json

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { CSSTransitionGroup } from 'react-transition-group';
 
 import { showLoadingMessage, showErrorMessage, hideLoadingMessage, getErrorMessage } from './components/Store/Actions.js';
 
@@ -9,6 +10,8 @@ import MessageComp from './components/MessageComp/MessageComp';
 import SettingsBar from './components/SettingsBar/SettingsBar';
 
 import styles from './styles/App.scss';
+import fade from './styles/transitions/fade.scss';
+import scale from './styles/transitions/scale.scss';
 
 const mapStateToProps = state => {
   return {
@@ -160,21 +163,45 @@ class ConnectedApp extends React.Component {
             onSaveButtonClick={() => this.handleSettingsSaveButtonClick()}
           />
         </div>
-        { showLoadingMessage &&
-          <MessageComp message='Loading...' />
-        }
-        { showErrorMessage &&
-          <MessageComp 
-            message={errorMessage}
-            onMessageButtonClick={() => this.handleMessageButtonClick()}
-           />
-        }
+        <CSSTransitionGroup
+          transitionName={fade}
+          transitionAppear={true}
+          transitionAppearTimeout={300}
+          trnasitionEnterTimeout={300}
+          transitionLeaveTimeout={300}
+          >
+          { showLoadingMessage &&
+            <MessageComp message='Loading...' />
+          }
+        </CSSTransitionGroup>
+        <CSSTransitionGroup
+          transitionName={fade}
+          transitionAppear={true}
+          transitionAppearTimeout={300}
+          trnasitionEnterTimeout={300}
+          transitionLeaveTimeout={300}
+          >
+          { showErrorMessage &&
+            <MessageComp 
+              message={errorMessage}
+              onMessageButtonClick={() => this.handleMessageButtonClick()}
+            />
+          }
+        </CSSTransitionGroup>
         <div className={styles['app__tabs']}>
+          <CSSTransitionGroup
+            transitionName={scale}
+            transitionAppear={true}
+            transitionAppearTimeout={300}
+            trnasitionEnterTimeout={300}
+            transitionLeaveTimeout={300}
+            >
           {fetchRequestStatus === 'success' && 
           <Tab data={contracts} onMenuItemIconClick={this.handleMenuItemIconClick}>
             {children}
           </Tab>        
           }
+          </CSSTransitionGroup>
         </div>
       </div>
     );

src/client/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import  { CSSTransitionGroup } from 'react-transition-group';
 
 import { showLoadingMessage, hideLoadingMessage, showErrorMessage, getErrorMessage } from '../../Store/Actions.js';
 
@@ -13,6 +14,7 @@ import EVMTabPanel from '../../EVMTab/EVMTabPanel';
 import EVMState from '../../EVMState/EVMState';
 
 import styles from './TabPanel.scss';
+import fade from '../../../styles/transitions/fade.scss';
 
 import classnames from 'classnames/bind';
 
@@ -299,14 +301,22 @@ class ConnectedTabPanel extends React.Component {
             {children}
           </InnerTab>
         </div>
-        {
-          modalOpen &&  
-            <Modal 
-              onInputChange={(e) => this.handleInputChange(e)} 
-              onInputSubmit={() => this.handleInputSubmit()}
-              onIconClick={() => this.handleModalIconClick()}
-            />
-        }
+        <CSSTransitionGroup
+          transitionName={fade}
+          transitionAppear={true}
+          transitionAppearTimeout={300}
+          trnasitionEnterTimeout={300}
+          transitionLeaveTimeout={300}
+          >
+          {
+            modalOpen &&  
+              <Modal 
+                onInputChange={(e) => this.handleInputChange(e)} 
+                onInputSubmit={() => this.handleInputSubmit()}
+                onIconClick={() => this.handleModalIconClick()}
+              />
+          }
+        </CSSTransitionGroup>
       </div>
     )
   }

src/client/components/Tab/TabPanel/TabPanel.js

@@ -0,0 +1,27 @@
+//fade
+.enter {
+  opacity: 0.01;
+
+  &.enterActive {
+    transition: opacity 0.3s ease-in;
+    opacity: 1;
+  }
+}
+
+.leave {
+  opacity: 1;
+
+  &.leaveActive {
+    transition: opacity 0.3s ease-in;
+    opacity: 0.01;
+  }
+}
+
+.appear {
+  opacity: 0.01;
+
+  &.appearActive {
+    transition: opacity 0.3s ease-in;
+    opacity: 1;
+  }
+}

src/client/styles/transitions/fade.scss

@@ -0,0 +1,34 @@
+//scale
+.enter {
+  opacity: 0.01;
+  transform: scale(0);
+
+  &.enterActive {
+    transition: opacity 0.4s ease-in, transform 0.3s ease-in-out;
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: scale(1);
+
+  &.leaveActive {
+    transition: opacity 0.4s ease-in, transform 0.3s ease-in-out;
+    opacity: 0.01;
+    transform: scale(0);
+  }
+}
+
+.appear {
+  opacity: 0.01;
+  transform: scale(0);
+
+
+  &.appearActive {
+    transition: opacity 0.4s ease-in, transform 0.3s ease-in-out;
+    opacity: 1;
+    transform: scale(1);
+  }
+}