logo text fadeIn

src/components/Layout/Layout.less

@@ -95,8 +95,9 @@
     display: inline-block;
     font-weight: 700;
     color: @primary-color;
+    white-space: nowrap;
     :local {
-      animation: fadeLeftIn 400ms linear;
+      animation: fadeLeftIn 500ms linear;
       animation-fill-mode: both;
     }
   }
@@ -174,14 +175,14 @@
   }
 }
 
-// @keyframes fadeLeftIn {
-//   0% {
-//     transform: translateX(20px);
-//     opacity: 0;
-//   }
-//
-//   100% {
-//     transform: translateX(0);
-//     opacity: 1;
-//   }
-// }
+@keyframes fadeLeftIn {
+  0% {
+    transform: translateX(5px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}

src/components/Layout/Sider.js

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