引入动画插件

a395027720 · Jul 27, 2019 · 27b7867 · 27b7867
1 parent 8361c86
commit 27b7867
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "react-dom": "^16.8.6",
     "react-id-swiper": "^2.3.1",
     "react-router-dom": "^5.0.1",
+    "react-transition-group": "^4.2.1",
     "resolve": "1.10.0",
     "sass-loader": "^7.1.0",
     "semver": "6.0.0",

diff --git a/src/components/header/index.scss b/src/components/header/index.scss
@@ -16,7 +16,7 @@
       display: block;
       width: 135px;
       height: 40px;
-      background: url(../../assets/images/logo.png) no-repeat center;
+      background: url(../../static/images/logo.png) no-repeat center;
       background-size: contain;
     }
 

diff --git a/src/pages/common/index.js b/src/pages/common/index.js
@@ -1,9 +1,15 @@
-import React, { Component } from "react";
-import {Link} from "react-router-dom"
-import Header from "@/components/header";
+import { CSSTransition } from "react-transition-group";
+import { Link } from "react-router-dom";
 import Footer from "@/components/footer";
+import Header from "@/components/header";
+import React, { Component } from "react";
+
 import "./index.scss";
+
 export default class Common extends Component {
+  state = {
+    dhzxShow: false
+  };
   render() {
     return (
       <div className="common">
@@ -24,13 +30,37 @@ export default class Common extends Component {
               </Link>
             </li>
             <li>
-              <Link to="/" className="dhzx" href="#">
-                <i className="iconfont">&#xe6f4;</i>电话咨询
-              </Link>
+              <CSSTransition
+                in={this.state.dhzxShow}
+                timeout={500}
+                classNames="dhzx"
+              >
+                <Link
+                  to="/"
+                  className="dhzx"
+                  href="#"
+                  onMouseEnter={this.handleMouseEnter.bind(this)}
+                  onMouseLeave={this.handleMouseLeave.bind(this)}
+                >
+                  <i className="iconfont">&#xe6f4;</i>电话咨询
+                </Link>
+              </CSSTransition>
             </li>
           </ul>
         </div>
       </div>
     );
   }
+
+  handleMouseEnter() {
+    if(this.state.dhzxShow) return;
+    this.setState({
+      dhzxShow: true
+    });
+  }
+  handleMouseLeave(){
+    this.setState({
+      dhzxShow: false
+    });
+  }
 }
diff --git a/src/pages/common/index.scss b/src/pages/common/index.scss
@@ -1,45 +1,74 @@
 @import "styles/default.scss";
 
 .common {
-    position: relative;
-
-    .float-btns {
-        position: fixed;
-        right: 0;
-        bottom: 100px;
-        z-index: 999;
-
-        li {
-            margin-bottom: 15px;
-            font-size: 18px;
-            a {
-                display: block;
-                width: 144px;
-                height: 60px;
-                line-height: 60px;
-                border-radius: 30px 0 0 30px;
-                color: white;
-                box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);
-                .iconfont {
-                    margin-left: 10px;
-                    margin-right: 10px;
-                }
-
-
-            }
-
-            .mfst {
-                background-color: $color-theme-red;
-            }
-
-            .zxzx {
-                background-color: #ff7c21;
-            }
-
-            .dhzx {
-                background-color: #ffb51a;
-            }
+  position: relative;
+
+  .float-btns {
+    position: fixed;
+    right: 0;
+    bottom: 100px;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    li {
+      margin-bottom: 15px;
+      font-size: 18px;
+      position: relative;
+      height: 60px;
+      a {
+        display: flex;
+        width: 144px;
+        height: 60px;
+        line-height: 60px;
+        border-radius: 30px 0 0 30px;
+        color: white;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
+        text-align: center;
+        float: right;
+        .iconfont {
+          margin-right: 10px;
+          font-size: 26px;
+          margin-left: 20px;
         }
+      }
+
+      .mfst {
+        background-color: $color-theme-red;
+      }
+
+      .zxzx {
+        background-color: #ff7c21;
+      }
+
+      .dhzx {
+        background-color: #ffb51a;
+      }
+
+      .dhzx-enter {
+        width: 144px;
+      }
+
+      .dhzx-enter-active {
+        width: 300px;
+        transition: width 500ms;
+      }
+
+      .dhzx-enter-done {
+        width: 300px;
+      }
+
+      .dhzx-exit {
+        width: 300px;
+      }
+
+      .dhzx-exit-active {
+        width: 144px;
+        transition: width 500ms;
+      }
 
+      .dhzx-exit-done {
+        width: 144px;
+      }
     }
-}
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -881,7 +881,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5":
   version "7.5.5"
   resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
   integrity sha1-dPulbTXvvspEQJHHhQzNSU/S8TI=
@@ -3317,6 +3317,13 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.npm.taobao.org/dom-helpers/download/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha1-6bNpcA+Vn2Ls3lprq95LzNkWmvg=
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-serializer@0:
   version "0.1.1"
   resolved "https://registry.npm.taobao.org/dom-serializer/download/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"
@@ -8198,6 +8205,16 @@ [email protected]:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-transition-group@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.npm.taobao.org/react-transition-group/download/react-transition-group-4.2.1.tgz#61fc9e36568bff9a1fe4e60fae323c8a6dbc0680"
+  integrity sha1-YfyeNlaL/5of5OYPrjI8im28BoA=
+  dependencies:
+    "@babel/runtime" "^7.4.5"
+    dom-helpers "^3.4.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^16.8.6:
   version "16.8.6"
   resolved "https://registry.npm.taobao.org/react/download/react-16.8.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact%2Fdownload%2Freact-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"