动画

layouts/basic-layout/product.vue

@@ -4,16 +4,19 @@
       <span class="menu">
         <a class="home">
           <Icon type="ios-keypad" />
-          <ul class="top-menu">
-            <li v-for="(item,i) in filterSider">
-              <ul>
-                <li class="title">{{item.title}}</li>
-                <li v-for="(li,j) in item.children">
-                    <a>{{li.title}}</a>                    
-                    </li>
-              </ul>
-            </li>
-          </ul>
+          <div class="top-menu-box">
+            <ul class="top-menu">
+              <li v-for="(item,i) in filterSider">
+                <ul>
+                  <li class="title">{{item.title}}</li>
+                  <li v-for="(li,j) in item.children">
+                      <a>{{li.title}}</a>                    
+                      </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+          
         </a>
       </span>
       <i-header-breadcrumb v-if="showBreadcrumb && !headerMenu && !isMobile" ref="breadcrumb" />
@@ -283,6 +286,13 @@ export default {
     padding: 0;
     .menu {
       margin: 0 10px;
+      display: block;
+      float: left;
+      // position: absolute;
+      // top: 10px;
+      // left: 10px;
+      width: 60px;
+      height: 60px;
       .home {
         position: relative;
         height: 30px;
@@ -293,17 +303,28 @@ export default {
         color: white;
         line-height: 30px;
         text-align: center;
+        
+        -webkit-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s;/* Safari */
+        transition: width 0.5s, height 0.5s, transform 0.5s;
+        i{
+           -webkit-transition: font-size 0.5s, margin 0.5s, -webkit-transform 0.5s;/* Safari */
+          transition: font-size 0.5s, margin 0.5s, transform 0.5s;
+        }
       }
-      .top-menu {
+      .top-menu-box{
         display: none;
         position: absolute;
         z-index: 99999;
         left: 70%;
-        top: 70%;
-        background: #f5f6fa;
-        border-radius: 4px;
+        top: 66%;
         min-width: 1800px;
         min-height: 300px;
+        background: #f5f6fa;
+        -webkit-transition: display 0.5s, -webkit-transform 0.5s;/* Safari */
+        transition: display 0.5s, transform 0.5s;
+      }
+      .top-menu {
+        border-radius: 4px;
         color: #2680eb;
         list-style: none;
         text-align: left;
@@ -345,9 +366,19 @@ export default {
           }
         }
       }
-      .home:hover .top-menu {
+      .home:hover{
+        margin-top: 10px;
+        height: 60px;
+        width: 60px;
+        z-index: 88888;
+      }
+      .home:hover .top-menu-box {
         display: block;
       }
+      .home:hover i{
+        font-size: 33px;
+        margin: 13px 0 0;
+      }
     }
     .ivu-breadcrumb {
       height: 50px;