Home fix (#3807)

* fix home

* update Banner min height

package.json

@@ -56,7 +56,6 @@
     "rc-notification": "~1.3.4",
     "rc-pagination": "~1.5.3",
     "rc-progress": "~2.0.1",
-    "rc-queue-anim": "~0.12.4",
     "rc-radio": "~2.0.0",
     "rc-rate": "~1.1.2",
     "rc-select": "~6.6.1",
@@ -112,8 +111,9 @@
     "moment-timezone": "^0.5.5",
     "pre-commit": "1.x",
     "querystring": "^0.2.0",
-    "rc-scroll-anim": "~0.3.0",
+    "rc-scroll-anim": "~0.5.0",
-    "rc-tween-one": "~0.6.20",
+    "rc-tween-one": "~0.11.0",
+    "rc-queue-anim": "~0.12.4",
     "react": "^15.0.0",
     "react-addons-test-utils": "^15.0.0",
     "react-copy-to-clipboard": "^4.0.1",

site/theme/static/home.less

@@ -25,6 +25,7 @@
   position: relative;
   height: 100%;
   width: 100%;
+  overflow: hidden;
   background: url("https://os.alipayobjects.com/rmsportal/GhjqstwSgxBXrZS.png") no-repeat center / cover;
 }
 .banner-text-wrapper {
@@ -111,6 +112,7 @@
 .content-wrapper {
   width: 100%;
   height: 100%;
+  max-width: 1500px;
   margin: auto;
   overflow: hidden;
   background: #fff;

site/theme/template/Home/Banner.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { FormattedMessage } from 'react-intl';
-import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import ScrollElement from 'rc-scroll-anim/lib/ScrollElement';
 import GitHubButton from 'react-github-button';
 import 'react-github-button/assets/style.css';
 import { Icon } from 'antd';
@@ -19,8 +19,8 @@ function typeFunc(a) {
 export default function Banner({ location, onEnterChange }) {
   const query = location.query;
   return (
-    <section id="banner">
+    <section id="banner" className="page">
-      <ScrollOverPack scrollName="banner" className="page" onChange={({ mode }) => onEnterChange(mode)} replay>
+      <ScrollElement id="banner" onChange={({ mode }) => onEnterChange(mode)}>
         <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>
@@ -38,7 +38,7 @@ export default function Banner({ location, onEnterChange }) {
           />
         </QueueAnim>
         <Icon type="down" className="down" />
-      </ScrollOverPack>
+      </ScrollElement>
     </section>
   );
 }

site/theme/template/Home/Link.jsx

@@ -10,11 +10,11 @@ export default class Link extends React.Component {
   render() {
     return (
       <div id="list">
-        <ScrollLink className="list-point" location="banner" />
+        <ScrollLink className="list-point" to="banner" toHash={false} />
-        <ScrollLink className="list-point" location="page1" />
+        <ScrollLink className="list-point" to="page1" toHash={false} />
-        <ScrollLink className="list-point" location="page2" />
+        <ScrollLink className="list-point" to="page2" toHash={false} />
-        <ScrollLink className="list-point" location="page3" />
+        <ScrollLink className="list-point" to="page3" toHash={false} />
-        <ScrollLink className="list-point" location="page4" />
+        <ScrollLink className="list-point" to="page4" toHash={false} />
       </div>
     );
   }

site/theme/template/Home/Page1.jsx

@@ -20,15 +20,15 @@ function onScrollEvent(e) {
 
 export default function Page1({ location }) {
   return (
-    <ScrollOverPack scrollName="page1" className="content-wrapper page"
+    <ScrollOverPack id="page1" className="content-wrapper page"
       playScale={1} replay scrollEvent={onScrollEvent}
       hideProps={{ image: { reverse: true } }}
     >
       <TweenOne key="image" className="image1 image-wrapper"
-        animation={{ x: 0, opacity: 1, duration: 550 }}
+        animation={{ x: 0, opacity: 1, ease: 'easeOutQuad' }}
         style={{ transform: 'translateX(-100px)', opacity: 0 }}
       />
-      <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse>
+      <QueueAnim className="text-wrapper" key="text" leaveReverse>
         <h2 key="h2"><FormattedMessage id="app.home.best-practice" /></h2>
         <p key="p" style={{ maxWidth: 310 }}><FormattedMessage id="app.home.experience" /></p>
         <div key="button">

site/theme/template/Home/Page2.jsx

@@ -8,12 +8,12 @@ import QueueAnim from 'rc-queue-anim';
 
 export default function Page2({ location }) {
   return (
-    <ScrollOverPack scrollName="page2"
+    <ScrollOverPack id="page2"
       className="content-wrapper page" playScale={1} replay
       hideProps={{ image: { reverse: true } }}
     >
-      <QueueAnim className="text-wrapper left-text" delay={300} key="text"
+      <QueueAnim className="text-wrapper left-text" key="text"
-        duration={550} type="bottom" leaveReverse
+        duration={450} type="bottom" leaveReverse
       >
         <h2 key="h2"><FormattedMessage id="app.home.design-pattern" /></h2>
         <p key="p" style={{ maxWidth: 260 }}><FormattedMessage id="app.home.pattern" /></p>
@@ -27,7 +27,7 @@ export default function Page2({ location }) {
         </div>
       </QueueAnim>
       <TweenOne key="image" className="image2 image-wrapper"
-        animation={{ x: 0, opacity: 1, delay: 300, duration: 550 }}
+        animation={{ x: 0, opacity: 1, ease: 'easeOutQuad' }}
         style={{ transform: 'translateX(100px)', opacity: 0 }}
       />
     </ScrollOverPack>

site/theme/template/Home/Page3.jsx

@@ -8,14 +8,14 @@ import QueueAnim from 'rc-queue-anim';
 
 export default function Page3({ location }) {
   return (
-    <ScrollOverPack scrollName="page3" className="content-wrapper page" playScale={1} replay
+    <ScrollOverPack id="page3" className="content-wrapper page" playScale={1} replay
       hideProps={{ image: { reverse: true } }}
     >
       <TweenOne key="image" className="image3 image-wrapper"
-        animation={{ x: 0, opacity: 1, duration: 550 }}
+        animation={{ x: 0, opacity: 1, ease: 'easeOutQuad' }}
         style={{ transform: 'translateX(-100px)', opacity: 0 }}
       />
-      <QueueAnim className="text-wrapper" delay={300} key="text" duration={550}
+      <QueueAnim className="text-wrapper" key="text"
         leaveReverse style={{ top: '40%' }}
       >
         <h2 key="h2"><FormattedMessage id="app.home.reusable-components" /></h2>

site/theme/template/Home/Page4.jsx

@@ -6,16 +6,17 @@ import QueueAnim from 'rc-queue-anim';
 
 export default function Page4() {
   return (
-    <ScrollOverPack scrollName="page4" className="content-wrapper page"
+    <ScrollOverPack id="page4" className="content-wrapper page"
       playScale={1} hideProps={{ image: { reverse: true } }}
     >
-      <QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550}
+      <QueueAnim className="text-wrapper-bottom" key="text"
         leaveReverse type="bottom"
       >
         <h2 key="h2"><FormattedMessage id="app.home.sub-slogan" /></h2>
         <p key="p"><FormattedMessage id="app.home.vision" /></p>
       </QueueAnim>
-      <TweenOne key="image" className="image4 bottom-wrapper" animation={{ y: 0, opacity: 1, duration: 550, delay: 550 }}
+      <TweenOne key="image" className="image4 bottom-wrapper"
+        animation={{ y: 0, opacity: 1, duration: 550, delay: 150, ease: 'easeOutQuad' }}
         style={{ transform: 'translateY(50px)', opacity: 0 }}
       />
     </ScrollOverPack>