fix: animation

vuepress-reco · Jul 20, 2019 · f5c65ec · f5c65ec
1 parent d476d6f
commit f5c65ec
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 125 deletions.
diff --git a/components/Home.vue b/components/Home.vue
@@ -180,9 +180,8 @@ export default {
       } 
     }
   }
-}
 
-&.reco-hide {
+  &.reco-hide {
   .hero {
     img {
       load-start()
@@ -212,33 +211,34 @@ export default {
   }
 }
 
-&.reco-show {
-  .hero {
-    img {
-      load-end(0.08s)
-    }
-    .h1 {
-      load-end(0.16s)
+  &.reco-show {
+    .hero {
+      img {
+        load-end(0.08s)
+      }
+      .h1 {
+        load-end(0.16s)
+      }
+      .description {
+        load-end(0.24s)
+      }
+      .huawei {
+        load-end(0.32s)
+      }
+      .action-button {
+        load-end(0.4s)
+      }
     }
-    .description {
-      load-end(0.24s)
+    .features {
+      load-end(0.40s)
     }
-    .huawei {
-      load-end(0.32s)
+    .home-center {
+      load-end(0.48s)
     }
-    .action-button {
-      load-end(0.4s)
+    .footer {
+      load-end(0.56s)
     }
   }
-  .features {
-    load-end(0.40s)
-  }
-  .home-center {
-    load-end(0.48s)
-  }
-  .footer {
-    load-end(0.56s)
-  }
 }
 
 @media (max-width: $MQMobile) {

diff --git a/components/HomeBlog.vue b/components/HomeBlog.vue
@@ -10,7 +10,6 @@
     <div class="home-blog-wrapper">
       <!-- 博客列表 -->
       <note-abstract 
-        v-if="showList"
         class="blog-list"
         :data="posts"
         :isHome="true"
@@ -89,7 +88,6 @@ export default {
     return {
       recoShow: false,
       tags: [],
-      showList: false
     }
   },
   computed: {
@@ -157,7 +155,6 @@ export default {
   },
   mounted () {
     this.recoShow = true
-    this.showList = true
   },
   methods: {
     // 根据分类获取页面数据
@@ -217,10 +214,6 @@ export default {
       color: lighten($textColor, 20%);
     }
   }
-  .home-blog-title {
-    margin 0 auto 10px
-    max-width 960px
-  }
   .home-blog-wrapper {
     display flex
     align-items: flex-start;
@@ -325,49 +318,11 @@ export default {
     }
   }
 
-  .features {
-    max-width 1126px
-    padding: 1.2rem 0;
-    margin: 2.5rem auto 0;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    align-content: stretch;
-    justify-content: space-between;
-  }
-
-  .feature {
-    flex-grow: 1;
-    flex-basis: 30%;
-    max-width: 32%;
-    transition: all .5s
-    box-sizing border-box
-    margin-bottom 10px
-    padding 0 15px
-    box-shadow 0 2px 10px rgba(0,0,0,0.2)
-    h2 {
-      font-size: 1.6rem;
-      font-weight: 500;
-      border-bottom: none;
-      padding-bottom: 0;
-      color: lighten($textColor, 10%);
-    }
-
-    p {
-      color: lighten($textColor, 20%);
-    }
-
-    &:hover {
-      transform scale(1.05)
-    }
-  }
-
   .footer {
     padding: 2.5rem;
     border-top: 1px solid $borderColor;
     text-align: center;
     color: lighten($textColor, 25%);
-    load-start()
     > span {
       margin-left 1rem
       > i {
@@ -377,13 +332,14 @@ export default {
   }
 }
 
-&.reco-hide {
+.reco-hide {
   .hero {
     img {
       load-start()
     }
-    .h1 {
+    h1 {
       load-start()
+      color red
     }
     .description {
       load-start()
@@ -395,7 +351,7 @@ export default {
       load-start()
     }
   }
-  .features {
+  .home-blog-wrapper {
     load-start()
   }
   .home-center {
@@ -407,12 +363,12 @@ export default {
   }
 }
 
-&.reco-show {
+.reco-show {
   .hero {
     img {
       load-end(0.08s)
     }
-    .h1 {
+    h1 {
       load-end(0.16s)
     }
     .description {
@@ -425,14 +381,14 @@ export default {
       load-end(0.4s)
     }
   }
-  .features {
-    load-end(0.40s)
+  .home-blog-wrapper {
+    load-end(0.48s)
   }
   .home-center {
-    load-end(0.48s)
+    load-end(0.56s)
   }
   .footer {
-    load-end(0.56s)
+    load-end(0.64s)
   }
 }
 
@@ -466,14 +422,6 @@ export default {
         padding: 0.6rem 1.2rem;
       }
     }
-    .features {
-      flex-direction: column;
-    }
-
-    .feature {
-      max-width: 100%;
-      padding: 0 2.5rem;
-    }
     .home-blog-wrapper {
       .info-wrapper {
         display none!important
@@ -522,12 +470,6 @@ export default {
       }
     }
 
-    .feature {
-      h2 {
-        font-size: 1.25rem;
-      }
-    }
-
     .home-blog-wrapper {
       .info-wrapper {
         display none!important

diff --git a/components/Page.vue b/components/Page.vue
@@ -233,30 +233,39 @@ function flatten (items, res) {
   padding-top 6rem
   padding-bottom 2rem
   display block
+  #time-line {
+    margin-top 0
+    padding-top 0
+  } 
   .page-title
     max-width: 740px;
     margin: 0 auto;
     padding: 0rem 2.5rem;
-
-.page-edit
-  @extend $wrapper
-  padding-top 1rem
-  padding-bottom 1rem
-  overflow auto
-  .edit-link
-    display inline-block
-    a
-      color lighten($textColor, 25%)
-      margin-right 0.25rem
-  .last-updated
-    float right
-    font-size 0.9em
-    .prefix
-      font-weight 500
-      color lighten($textColor, 25%)
-    .time
-      font-weight 400
-      color #aaa
+  .page-edit
+    @extend $wrapper
+    padding-top 1rem
+    padding-bottom 1rem
+    overflow auto
+    .edit-link
+      display inline-block
+      a
+        color lighten($textColor, 25%)
+        margin-right 0.25rem
+    .last-updated
+      float right
+      font-size 0.9em
+      .prefix
+        font-weight 500
+        color lighten($textColor, 25%)
+      .time
+        font-weight 400
+        color #aaa
+  &.reco-hide.page {
+    load-start()
+  }
+  &.reco-show.page {
+    load-end(0.08s)
+  }          
 
 .page-nav
   @extend $wrapper
@@ -271,12 +280,6 @@ function flatten (items, res) {
   .next
     float right
 
-.reco-hide.page {
-  load-start()
-}
-.reco-show.page {
-  load-end(0.08s)
-}    
 
 @media (max-width: $MQMobile)
   .page-title

diff --git a/layouts/Category.vue b/layouts/Category.vue
@@ -1,18 +1,20 @@
 <template>
-  <div class="categories-wrapper">
+  <div class="categories-wrapper" :class="recoShow ?'reco-show' : 'reco-hide'">
     <!-- 公共布局 -->
     <Common :sidebar="false" :isComment="false">
       <!-- 页面标题 -->
       <h2 class="title">{{ title }}</h2>
 
       <!-- 博客列表 -->
       <note-abstract 
+        class="list"
         :data="posts"
         :currentPage="currentPage"
         @currentTag="getCurrentTag"></note-abstract>
 
       <!-- 分页 -->
       <pagation 
+        class="pagation"
         :data="posts"
         :currentPage="currentPage"
         @getCurrentPage="getCurrentPage"></pagation>
@@ -31,7 +33,8 @@ export default {
   data () {
     return {
       // 当前页码
-      currentPage: 1
+      currentPage: 1,
+      recoShow: false
     }
   },
 
@@ -51,6 +54,10 @@ export default {
     }
   },
 
+  mounted () {
+    this.recoShow = true
+  },
+
   methods: {
     // 获取当前tag
     getCurrentTag (tag) {
@@ -72,12 +79,27 @@ export default {
 <style src="../styles/theme.styl" lang="stylus"></style>
 
 <style lang="stylus" scoped>
+@require '../styles/loadMixin.styl'
 .categories-wrapper
   max-width: 740px;
   margin: 0 auto;
   padding: 4.6rem 2.5rem 0; 
   .title
     margin-bottom 3rem
+  &.reco-hide
+    .title, .list, .pagation
+      load-start()
+  &.reco-show {
+    .title {
+      load-end(0.08s)
+    }
+    .list {
+      load-end(0.16s)
+    }
+    .pagation {
+      load-end(0.24s)
+    }
+  }  
 
 @media (max-width: $MQMobile)
   .categories-wrapper