logo text fadeIn

Compuabhi · Feb 26, 2018 · 98b773f · 98b773f
1 parent cd54fcb
commit 98b773f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/src/components/Layout/Layout.less b/src/components/Layout/Layout.less
@@ -75,6 +75,8 @@
   }
 }
 
+
+
 .logo {
   height: 96px;
   display: flex;
@@ -93,6 +95,10 @@
     display: inline-block;
     font-weight: 700;
     color: @primary-color;
+    :local {
+      animation: fadeLeftIn 400ms linear;
+      animation-fill-mode: both;
+    }
   }
 }
 
@@ -167,3 +173,15 @@
     }
   }
 }
+
+// @keyframes fadeLeftIn {
+//   0% {
+//     transform: translateX(20px);
+//     opacity: 0;
+//   }
+//
+//   100% {
+//     transform: translateX(0);
+//     opacity: 1;
+//   }
+// }
diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js
@@ -5,7 +5,9 @@ import { Link } from 'react-router-dom'
 import { arrayToTree, queryArray } from 'utils'
 import pathToRegexp from 'path-to-regexp'
 
-const Menus = ({ siderFold, darkTheme, navOpenKeys, changeOpenKeys, menu, location }) => {
+const Menus = ({
+  siderFold, darkTheme, navOpenKeys, changeOpenKeys, menu, location,
+}) => {
   // 生成树状
   const menuTree = arrayToTree(menu.filter(_ => _.mpid !== '-1'), 'id', 'mpid')
   const levelMap = {}

diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js
@@ -20,7 +20,7 @@ const Sider = ({
     <div>
       <div className={styles.logo}>
         <img alt="logo" src={config.logo} />
-        {siderFold ? '' : <span>{config.name}</span>}
+        <span>{siderFold ? '' : config.name}</span>
       </div>
       <Menus {...menusProps} />
       {!siderFold ? <div className={styles.switchtheme}>