🔨 fix: 加载更多后动画失效

AlanDecode · Feb 15, 2019 · 11380be · 11380be
1 parent 8854d8a
commit 11380be
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 11 deletions.
diff --git a/assets/VOID.js b/assets/VOID.js
@@ -339,6 +339,7 @@ var VOID = {
                 }
                 VOIDConfig.nextUrl = $(data).find('a.next').attr('href');
                 $('#post-list').append($(data).find('a.item'));
+                $('a.item.ajax:not(.ajax-loaded)').addClass('ajax-loaded');
                 VOID.isAjaxLoading = false;
                 if(VOIDConfig.PJAX){
                     VOID.afterPjax();

diff --git a/assets/parts/_index.scss b/assets/parts/_index.scss
@@ -183,6 +183,13 @@ main{
                     width: calc((100% - 60px) / 3.001);
                     box-shadow: 0 0 20px 2px rgba(0,0,0,0.1);
                     transition: 0.3s ease all;
+                    &.ajax{
+                        opacity: 0;
+                        &.ajax-loaded{
+                            animation: ajax-loaded 0.3s;
+                            animation-fill-mode: forwards;
+                        }
+                    }
                     &:nth-of-type(3n + 2){
                         margin: 0 30px;
                     }
@@ -298,11 +305,4 @@ main{
             }
         }
     }
-}
-
-a.item.ajax-loaded{
-    transform: translateY(-10px);
-    opacity: 0;
-    animation: slide-in 0.3s;
-    animation-fill-mode: forwards;
 }
diff --git a/assets/parts/_var.scss b/assets/parts/_var.scss
@@ -25,13 +25,11 @@ $bannerHeight_mobile: 300px;
     }
 }
 
-@keyframes slide-in{
+@keyframes ajax-loaded{
     0%{
-        transform: translateY(-10px);
         opacity: 0;
     }
     100%{
-        transform: translateY(0);
         opacity: 1;
     }
 }

diff --git a/index.php b/index.php
@@ -68,7 +68,7 @@
         <section id="post-list" aria-label="最近文章列表">
             <div class="section-title">RECENT</div>
             <?php while($this->next()): //直接显示摘要是默认选项 ?>
-            <a class="item <?php if($this->fields->banner == '' && empty($setting['defaultCover'])) echo 'show-excerpt'; ?> <?php if(Utils::isAjax()) echo 'ajax-loaded'; ?>" href="<?php $this->permalink(); ?>" aria-label="最近文章" itemscope="" itemtype="http://schema.org/BlogPosting">
+            <a class="item <?php if($this->fields->banner == '' && empty($setting['defaultCover'])) echo 'show-excerpt'; ?> <?php if(Utils::isAjax()) echo 'ajax'; ?>" href="<?php $this->permalink(); ?>" aria-label="最近文章" itemscope="" itemtype="http://schema.org/BlogPosting">
                 <?php 
                     if($this->fields->banner != ''){
                         Contents::exportCover($this, $this->fields->banner, 150, false);