feats

package.json

@@ -64,6 +64,7 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1",
+    "react-transition-group": "^4.4.2",
     "react-zmage": "^0.8.5-beta.37",
     "redux": "^4.0.1",
     "umi": "^2.13.0",

src/components/PageTransition/index.jsx

@@ -0,0 +1,26 @@
+import withRouter from 'umi/withRouter';
+import { CSSTransition, SwitchTransition } from 'react-transition-group';
+import styles from './style.less';
+
+export default withRouter((props) => {
+  const currentURL = props.location.pathname + props.location.search
+
+  return (
+    <SwitchTransition>
+      <CSSTransition
+        key={currentURL}
+        addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
+        classNames={{
+          enter: styles['page-fade-enter'],
+          enterActive: styles['page-fade-enter-active'],
+          exit: styles['page-fade-exit'],
+          exitActive: styles['page-fade-exit-active']
+        }}
+      >
+        <div>
+          {props.children}
+        </div>
+      </CSSTransition>
+    </SwitchTransition>
+  );
+})

src/components/PageTransition/style.less

@@ -0,0 +1,21 @@
+
+.page-fade-enter {
+  opacity: 0;
+  transform: translateY(20%);
+}
+.page-fade-enter-active {
+  opacity: 1;
+  transform: translateY(0%);
+}
+.page-fade-exit {
+  opacity: 1;
+  transform: translateY(0%);
+}
+.page-fade-exit-active {
+  opacity: 0;
+  transform: translateY(20%);
+}
+.page-fade-enter-active,
+.page-fade-exit-active {
+  transition: opacity 500ms, transform 500ms;
+}

src/components/RouterEvent/index.jsx

@@ -1,39 +0,0 @@
-import { Component, Fragment } from "react";
-import withRouter from 'umi/withRouter';
-import Prompt from 'umi/prompt';
-
-class RouterEvent extends Component {
-  state = {
-    location: {}
-  }
-
-  componentDidMount() {
-    console.log('-----props------->', this.props)
-
-    this.props.onEnter();
-    this.setState({ location: this.props.location });
-  }
-
-  componentDidUpdate() {
-    const originURL = this.props.location.pathname + this.props.location.search
-    const currentURL = this.state.location.pathname + this.state.location.search
-
-    if (originURL != currentURL) {
-      this.props.onEnter();
-      this.setState({ location: this.props.location });
-    }
-  }
-
-  render() {
-    const onLeave = this.props.onLeave;
-
-    return (
-      <div>
-        <Prompt message={() => { onLeave(); return true; }} />
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-export default withRouter(RouterEvent)

src/layouts/BlankLayout.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import RouterEvent from '@/components/RouterEvent';
+import PageTransition from '@/components/PageTransition';
 
-const Layout = ({ children }) => {
+const Layout = (props) => {
   return (
-    <RouterEvent onEnter={() => console.log('------onEnter--------')} onLeave={() => console.log('------onLeave--------')}>
-      <>{children}</>
-    </RouterEvent>
+    <PageTransition>
+      {props.children}
+    </PageTransition>
   );
 };