refactor(avatar): loading animation 头像加载动画优化

Increase loading speed and enhance compatibility
MOxFIVE · Feb 27, 2016 · d9310b5 · d9310b5
1 parent dd1c3a8
commit d9310b5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 22 deletions.
diff --git a/layout/_partial/left-col.ejs b/layout/_partial/left-col.ejs
@@ -2,13 +2,8 @@
 <div class="intrude-less">
     <header id="header" class="inner">
         <a href="/" class="profilepic">
-            <% if (theme.animate){ %>
-            <img lazy-src="<%=theme.avatar%>" class="js-avatar">
-            <%}else{%>
-            <img src="<%=theme.avatar%>" class="js-avatar" style="width: 100%;height: 100%;opacity: 1;">
-            <%}%>
+            <img src="<%=theme.avatar%>" class="animated zoomIn">
         </a>
-
         <hgroup>
           <h1 class="header-author"><a href="/"><%=theme.author%></a></h1>
         </hgroup>

diff --git a/layout/_partial/mobile-nav.ejs b/layout/_partial/mobile-nav.ejs
@@ -6,11 +6,7 @@
     <div class="intrude-less">
         <header id="header" class="inner">
             <a href="/" class="profilepic">
-                <% if (theme.animate){ %>
-                    <img lazy-src="<%=theme.avatar%>" class="js-avatar">
-                <% } else { %>
-                    <img src="<%=theme.avatar%>" class="js-avatar" style="width: 100%; height: 100%; opacity: 1;">
-                <% } %>
+                <img src="<%=theme.avatar%>" class="animated zoomIn">
             </a>
             <hgroup>
               <h1 class="header-author"><a href="/" title="回到主页"><%=theme.author%></a></h1>

diff --git a/source/css/_partial/main.styl b/source/css/_partial/main.styl
@@ -101,23 +101,18 @@
         position: relative;
         overflow: hidden;
         background: #88acdb;
-        -webkit-transition: all 0.2s ease-in;
-        //display: -webkit-box;
         -webkit-box-orient: horizontal;
         -webkit-box-pack: center;
         -webkit-box-align: center;
         text-align: center;
         img{
-            width: 20%;
-            height: 20%;
+            width: 100%;
+            height: 100%;
             border-radius: 50%;
-            opacity: 0;
-            -webkit-transition: all 0.2s ease-in;
-            &.show{
-                width: 100%;
-                height: 100%;
-                opacity: 1;
-            }
+            animation-duration: .4s;
+            animation-delay: .3s;
+            -webkit-animation-duration: .4s;
+            -webkit-animation-delay: .3s;
         }
         &:hover {
             background: white;