fix scrollAnim hideProps header … (#5506)

* fix https://github.com/react-component/scroll-anim/issues/19, header switch

* fix home icon down animation

site/theme/static/home.less

@@ -81,6 +81,7 @@
   color: rgba(255, 255, 255, .75);
   left: 50%;
   margin-left: -7px;
+  animation: upDownMove 1.2s ease-in-out infinite alternate;
 }
 
 .page {
@@ -164,3 +165,9 @@
   line-height: 28px;
   color: #999;
 }
+
+@keyframes upDownMove {
+  to {
+    transform: translateY(10px);
+  }
+}

site/theme/template/Home/Banner.jsx

@@ -20,7 +20,11 @@ export default function Banner({ location, onEnterChange }) {
   const isZhCN = utils.isZhCN(location.pathname);
   return (
     <section className="page banner-wrapper">
-      <ScrollElement id="banner" onChange={({ mode }) => onEnterChange(mode)}>
+      <ScrollElement
+        className="page" id="banner"
+        onChange={({ mode }) => onEnterChange(mode)}
+        playScale={0.9}
+      >
         <QueueAnim className="banner-text-wrapper" type={typeFunc} delay={300} key="banner">
           <h2 key="h2">ANT <p>DESIGN</p></h2>
           <p key="content"><FormattedMessage id="app.home.slogan" /></p>

site/theme/template/Home/Page1.jsx

@@ -7,24 +7,9 @@ import { Icon, Button } from 'antd';
 import QueueAnim from 'rc-queue-anim';
 import * as utils from '../utils';
 
-function onScrollEvent(e) {
-  const clientHeight = document.documentElement.clientHeight;
-  const header = document.getElementById('header');
-  if (e.pageY >= clientHeight) {
-    if (header.className.indexOf('home-nav-bottom') < 0) {
-      header.className += ' home-nav-bottom';
-    }
-  } else if (header.className.indexOf('home-nav-bottom') >= 0) {
-    header.className = header.className.replace(/home-nav-bottom/ig, '');
-  }
-}
-
 export default function Page1({ location }) {
   return (
-    <ScrollOverPack id="page1" className="content-wrapper page"
-      replay scrollEvent={onScrollEvent}
-      hideProps={{ image: { reverse: true } }}
-    >
+    <ScrollOverPack id="page1" className="content-wrapper page">
       <TweenOne key="image" className="image1 image-wrapper"
         animation={{ x: 0, opacity: 1, ease: 'easeOutQuad' }}
         style={{ transform: 'translateX(-100px)', opacity: 0 }}

site/theme/template/Home/Page2.jsx

@@ -10,8 +10,7 @@ import * as utils from '../utils';
 export default function Page2({ location }) {
   return (
     <ScrollOverPack id="page2"
-      className="content-wrapper page" replay
-      hideProps={{ image: { reverse: true } }}
+      className="content-wrapper page"
     >
       <QueueAnim className="text-wrapper left-text" key="text"
         duration={450} type="bottom" leaveReverse

site/theme/template/Home/Page3.jsx

@@ -9,9 +9,7 @@ import * as utils from '../utils';
 
 export default function Page3({ location }) {
   return (
-    <ScrollOverPack id="page3" className="content-wrapper page" replay
-      hideProps={{ image: { reverse: true } }}
-    >
+    <ScrollOverPack id="page3" className="content-wrapper page">
       <TweenOne key="image" className="image3 image-wrapper"
         animation={{ x: 0, opacity: 1, ease: 'easeOutQuad' }}
         style={{ transform: 'translateX(-100px)', opacity: 0 }}

site/theme/template/Home/Page4.jsx

@@ -6,9 +6,7 @@ import QueueAnim from 'rc-queue-anim';
 
 export default function Page4() {
   return (
-    <ScrollOverPack id="page4" className="content-wrapper page"
-      hideProps={{ image: { reverse: true } }}
-    >
+    <ScrollOverPack id="page4" className="content-wrapper page">
       <QueueAnim className="text-wrapper-bottom" key="text"
         leaveReverse type="bottom"
       >

site/theme/template/Home/index.jsx

@@ -94,9 +94,6 @@ function getStyle() {
     #footer a {
       color: #eee;
     }
-    .down {
-      animation: upDownMove 1.2s ease-in-out infinite;
-    }
   `;
 }