appear and disappear animations (#111)

aerokube · Jun 2, 2018 · 73bc394 · 73bc394
1 parent c9ee25e
commit 73bc394
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 28 deletions.
diff --git a/web/package.json b/web/package.json
@@ -51,6 +51,7 @@
     "react-router-dom": "next",
     "react-select": "1.0.0-rc.4",
     "react-spinners": "0.2.6",
+    "react-transition-group": "^2.3.1",
     "rx": "^4.1.0",
     "rx-connect": "0.7.0",
     "rxjs": "5.4.2",

diff --git a/web/src/components/Browsers/style.scss b/web/src/components/Browsers/style.scss
@@ -40,4 +40,5 @@
   bottom: 0;
   left: 0;
   border-bottom: 1px dashed;
+  transition: all 300ms ease-in;
 }
diff --git a/web/src/components/Sessions/index.js b/web/src/components/Sessions/index.js
@@ -3,6 +3,7 @@ import {Link} from "react-router-dom";
 
 import "./style.scss";
 
+import {CSSTransition, TransitionGroup,} from 'react-transition-group';
 
 const Sessions = (props) => {
     const {sessions = {}} = props;
@@ -13,39 +14,59 @@ const Sessions = (props) => {
             <div className="sessions__section-title">
                 Sessions
             </div>
-            <div className={`sessions__list sessions__list_count-${list.length}`}>
+            <TransitionGroup className={`sessions__list sessions__list_count-${list.length}`}>
                 {list.length && list.map(session => {
-                    return (
-                        <div className="session-container" key={session}>
-                            <Link className="session-link" to={`/sessions/${session}`}>
-                                <div className="session-link-browser">
-                                    <span
-                                        className="session-link-browser__name">{sessions[session].caps.browserName}</span>
-                                    <span
-                                        className="session-link-browser__version">{sessions[session].caps.version}</span>
+                        return (
+                            <CSSTransition
+                                key={session}
+                                timeout={500}
+                                classNames="session-container_state"
+                                unmountOnExit
+                            >
+                                <div className="session-container">
+                                    <Link className="session-link" to={`/sessions/${session}`}>
+                                        <div className="session-link-browser">
+                                            <span className="session-link-browser__name">
+                                                {sessions[session].caps.browserName}
+                                            </span>
+                                            <span className="session-link-browser__version">
+                                                {sessions[session].caps.version}
+                                            </span>
+                                        </div>
+                                        {sessions[session].caps.name && (
+                                            <div className="session-cap session-cap__name"
+                                                 title={sessions[session].caps.name}>
+                                                {sessions[session].caps.name}
+                                            </div>
+                                        )}
+                                        {sessions[session].caps.enableVNC && (
+                                            <div className="session-cap session-cap__with-vnc">
+                                                <span title="With VNC" className="icon dripicons-device-desktop"/>&nbsp;
+                                                <sup>VNC</sup>
+                                            </div>
+                                        )}
+                                    </Link>
                                 </div>
-                                {sessions[session].caps.name && (
-                                    <div className="session-cap session-cap__name" title={sessions[session].caps.name}>
-                                        {sessions[session].caps.name}
-                                    </div>
-                                )}
-                                {sessions[session].caps.enableVNC && (
-                                    <div className="session-cap session-cap__with-vnc">
-                                        <span title="With VNC" className="icon dripicons-device-desktop"/>&nbsp;
-                                        <sup>VNC</sup>
-                                    </div>
-                                )}
-                            </Link>
-                        </div>
-                    );
-                })
-                || (
+                            </CSSTransition>
+                        );
+                    }
+                )}
+            </TransitionGroup>
+            {(
+                <CSSTransition
+                    in={!list.length}
+                    timeout={500}
+                    exit={false}
+                    classNames="sessions__no-any_state"
+                    unmountOnExit
+                >
                     <div className="sessions__no-any">
                         <div title="No any" className="icon dripicons-hourglass"/>
                         <div className="nosession-any-text">NO SESSIONS YET :'(</div>
                     </div>
-                )}
-            </div>
+                </CSSTransition>
+            )}
+
         </div>
     );
 };

diff --git a/web/src/components/Sessions/style.scss b/web/src/components/Sessions/style.scss
@@ -33,6 +33,11 @@ $big-screen: 1280px;
     .nosession-any-text {
       margin: 10px;
     }
+
+    // don't show until all sessions are gone
+    &_state-enter-active {
+      display: none;
+    }
   }
 }
 
@@ -76,6 +81,25 @@ $big-screen: 1280px;
       flex-basis: 33.333%;
       max-width: 33.333%;
     }
+
+    //TRANSITIONS
+    &_state-enter {
+      opacity: 0.01;
+    }
+
+    &_state-enter-active {
+      opacity: 1;
+      transition: opacity 500ms ease-in;
+    }
+
+    &_state-exit {
+      opacity: 1;
+    }
+
+    &_state-exit-active {
+      opacity: 0.01;
+      transition: opacity 500ms ease-out;
+    }
   }
 
   .session-link {

diff --git a/web/yarn.lock b/web/yarn.lock
@@ -1755,6 +1755,10 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-helpers@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
+
 dom-serializer@0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -4157,7 +4161,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10:
+prop-types@^15.5.10, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
@@ -4365,6 +4369,14 @@ react-transform-hmr@^1.0.3:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
+react-transition-group@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.3.1.tgz#31d611b33e143a5e0f2d94c348e026a0f3b474b6"
+  dependencies:
+    dom-helpers "^3.3.1"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.1"
+
 [email protected]:
   version "15.4.2"
   resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"