fix: Header animation more smoothly when scroll (#332)

openpitrix · Sep 6, 2018 · ffebe0c · ffebe0c
1 parent e54ecee
commit ffebe0c
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 81 deletions.
diff --git a/src/components/Banner/index.jsx b/src/components/Banner/index.jsx
@@ -1,5 +1,4 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import classnames from 'classnames';
 import { translate } from 'react-i18next';
 import { withRouter } from 'react-router-dom';
@@ -9,7 +8,7 @@ import Input from '../Base/Input';
 import styles from './index.scss';
 
 @translate()
-class Banner extends PureComponent {
+class Banner extends Component {
   onSearch = value => {
     this.props.history.push('/apps/search/' + value);
   };

diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -73,13 +73,18 @@ class Header extends Component {
       match,
       rootStore: { fixNav }
     } = this.props;
-    const isDark = !isHome || fixNav;
-    const logoUrl = isDark ? '/logo_light.svg' : '/logo_dark.svg';
-    const needShowSearch = isDark && isHome;
+
+    const logoUrl = !isHome || fixNav ? '/logo_light.svg' : '/logo_dark.svg';
+    const needShowSearch = isHome && fixNav;
     const appSearch = match.params.search;
 
     return (
-      <div className={classnames('header', styles.header, { [styles.stickyHeader]: isDark })}>
+      <div
+        className={classnames('header', styles.header, {
+          [styles.deep]: !isHome,
+          [styles.deepHome]: isHome && fixNav
+        })}
+      >
         <div className={styles.wrapper}>
           <Logo className={styles.logo} url={logoUrl} />
           <div className={styles.menus}>{this.renderMenuBtns()}</div>

diff --git a/src/components/Header/index.scss b/src/components/Header/index.scss
@@ -2,13 +2,59 @@
 
 $profile-hover-color: #efe6f8;
 
+@keyframes deepHeader {
+  from {
+    opacity: 0;
+    background: transparent;
+  }
+  to {
+    opacity: 1;
+    background: linear-gradient(to left, $P75, #854fb9 32%, #484999);
+  }
+}
+
 .header {
   position: absolute;
   top: 0;
   width: 100%;
   height: $header-height;
+  z-index: 999;
   background: none;
 
+  &.deep, &.deepHome {
+    position: fixed;
+    .menus {
+      a {
+        color: $N0;
+      }
+      .role{
+        [class*='target']{
+          color: $N0;
+
+          :global{
+            .icon-caret-down{
+              svg {
+                --primary-color: #{$N0};
+                --secondary-color: #{$N0};
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.deep {
+    background: linear-gradient(to left, $P75, #854fb9 32%, #484999);
+  }
+  &.deepHome {
+    animation-duration: 0.5s;
+    animation-name: deepHeader;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: forwards;
+  }
+
   .wrapper {
     width: $content-width;
     margin: 0 auto;
@@ -84,31 +130,6 @@ $profile-hover-color: #efe6f8;
 
 }
 
-.stickyHeader {
-  position: fixed;
-  top: 0;
-  z-index: 999;
-  background: linear-gradient(to left, $P75, #854fb9 32%, #484999);
-  .menus {
-    a {
-      color: $N0;
-    }
-    .role{
-      [class*='target']{
-        color: $N0;
-        :global{
-          .icon-caret-down{
-            svg {
-              --primary-color: #{$N0};
-              --secondary-color: #{$N0};
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
 .menus {
   float: right;
   line-height: $header-height;

diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
@@ -1,7 +1,7 @@
 import React, { Fragment, Component } from 'react';
 import classnames from 'classnames';
 import { observer, inject } from 'mobx-react';
-import { get, find, throttle } from 'lodash';
+import { get, find } from 'lodash';
 
 import { getScrollTop, getScrollBottom } from 'src/utils';
 import Nav from 'components/Nav';
@@ -19,15 +19,16 @@ import styles from './index.scss';
 @observer
 export default class Home extends Component {
   static async onEnter({ categoryStore, appStore }, { category, search }) {
-    appStore.loadPageInit();
-    await categoryStore.fetchAll();
-    let params = {};
+    const params = {};
     if (category) {
       params.category_id = category;
     }
     if (search) {
       params.search_word = search;
     }
+
+    appStore.loadPageInit();
+    await categoryStore.fetchAll();
     await appStore.fetchApps(params);
     appStore.homeApps = appStore.apps;
   }
@@ -45,7 +46,7 @@ export default class Home extends Component {
       // home page
       rootStore.setNavFix(false);
       this.threshold = this.getThreshold();
-      window.onscroll = throttle(this.handleScroll, 200);
+      window.onscroll = this.handleScroll;
     }
   }
 
@@ -58,9 +59,7 @@ export default class Home extends Component {
   }
 
   componentWillUnmount() {
-    if (window.onscroll) {
-      window.onscroll = null;
-    }
+    window.onscroll = null;
   }
 
   getThreshold() {
@@ -98,17 +97,18 @@ export default class Home extends Component {
 
     const initLoadNumber = parseInt((document.body.clientHeight - 720) / 250);
     if (len > 0 && !categories[0].appFlag && !appStore.isLoading) {
-      this.loadAppData(categories, initLoadNumber);
+      await this.loadAppData(categories, initLoadNumber);
     }
 
     let scrollBottom = getScrollBottom();
     if (scrollBottom < 100 && !appStore.isProgressive) {
-      this.loadAppData(categories);
+      await this.loadAppData(categories);
     }
   };
 
   loadAppData = async (categories, initLoadNumber) => {
     const { categoryStore, appStore } = this.props;
+
     for (let i = 0; i < categories.length; i++) {
       if (!categories[i].appFlag) {
         categoryStore.categories[i].appFlag = true;
@@ -148,26 +148,24 @@ export default class Home extends Component {
     return (
       <Fragment>
         {isHomePage && <Banner />}
-        <div className={styles.contentOuter}>
-          <div className={classnames(styles.content, { [styles.fixNav]: fixNav })}>
-            <Nav className={styles.nav} navs={categories.toJSON()} />
-            <Loading isLoading={isLoading} className={styles.homeLoad}>
-              <AppList
-                className={styles.apps}
-                apps={showApps}
-                categoryApps={categories.toJSON()}
-                categoryTitle={categoryTitle}
-                appSearch={appSearch}
-              />
-              {isProgressive && (
-                <div className={styles.loading}>
-                  <div className={styles.loadOuter}>
-                    <div className={styles.loader} />
-                  </div>
+        <div className={classnames(styles.content, { [styles.fixNav]: fixNav })}>
+          <Nav className={styles.nav} navs={categories.toJSON()} />
+          <Loading isLoading={isLoading} className={styles.homeLoad}>
+            <AppList
+              className={styles.apps}
+              apps={showApps}
+              categoryApps={categories.toJSON()}
+              categoryTitle={categoryTitle}
+              appSearch={appSearch}
+            />
+            {isProgressive && (
+              <div className={styles.loading}>
+                <div className={styles.loadOuter}>
+                  <div className={styles.loader} />
                 </div>
-              )}
-            </Loading>
-          </div>
+              </div>
+            )}
+          </Loading>
         </div>
       </Fragment>
     );

diff --git a/test/pages/__snapshots__/Home.test.js.snap b/test/pages/__snapshots__/Home.test.js.snap
@@ -2,31 +2,27 @@
 
 exports[`Home basic render 1`] = `
 <div
-  class="contentOuter"
+  class="content"
 >
   <div
-    class="content"
+    class="nav nav"
+  >
+    <p
+      class="caption"
+    />
+    <ul
+      class="subNav"
+    />
+  </div>
+  <div
+    class="appList apps"
   >
     <div
-      class="nav nav"
-    >
-      <p
-        class="caption"
-      />
-      <ul
-        class="subNav"
-      />
-    </div>
+      class="title"
+    />
     <div
-      class="appList apps"
-    >
-      <div
-        class="title"
-      />
-      <div
-        class="noData"
-      />
-    </div>
+      class="noData"
+    />
   </div>
 </div>
 `;