Fade in posts in post stream using CSS

This also avoids a double-fade from the JavaScript code, which was probably introduced in #2160.
flarum · Aug 14, 2020 · 90707a4 · 90707a4
1 parent b5357ba
commit 90707a4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/js/src/forum/components/PostStream.js b/js/src/forum/components/PostStream.js
@@ -24,11 +24,6 @@ export default class PostStream extends Component {
   }
 
   view() {
-    function fadeIn(element, isInitialized, context) {
-      if (!context.fadedIn) $(element).hide().fadeIn();
-      context.fadedIn = true;
-    }
-
     let lastTime;
 
     const viewingEnd = this.stream.viewingEnd();
@@ -45,7 +40,6 @@ export default class PostStream extends Component {
         content = PostComponent ? PostComponent.component({ post }) : '';
 
         attrs.key = 'post' + post.id();
-        attrs.config = fadeIn;
         attrs['data-time'] = time.toISOString();
         attrs['data-number'] = post.number();
         attrs['data-id'] = post.id();

diff --git a/less/forum/PostStream.less b/less/forum/PostStream.less
@@ -6,7 +6,18 @@
     margin-top: 10px;
   }
 }
+
+@-webkit-keyframes fadeIn {
+  0% {opacity: 0}
+  100% {opacity: 1}
+}
+@keyframes fadeIn {
+  0% {opacity: 0}
+  100% {opacity: 1}
+}
 .PostStream-item {
+  .animation(pulsate 1s ease-in-out);
+
   &:not(:last-child) {
     border-bottom: 1px solid @control-bg;