From c610a259d59bcc52626fc5e068b165e5ee54df8f Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 14 May 2020 21:22:33 -0700
Subject: [PATCH] fix: ListItem should have proper fade animations (#1771)

---
 src/routes/_components/list/ListItem.html | 29 ++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/routes/_components/list/ListItem.html b/src/routes/_components/list/ListItem.html
index 62c3c77c..15db923b 100644
--- a/src/routes/_components/list/ListItem.html
+++ b/src/routes/_components/list/ListItem.html
@@ -1,4 +1,17 @@
-<div class="list-item"
+<style>
+  .list-item {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s linear;
+    contain: content; /* see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content */
+  }
+
+  .list-item.shown {
+    opacity: 1;
+    pointer-events: auto;
+  }
+</style>
+<div class="list-item {shown && 'shown'}"
      id={`list-item-${key}`} >
   <svelte:component this={component}
               virtualProps={props}
@@ -7,3 +20,17 @@
               virtualKey={key}
   />
 </div>
+<script>
+  import { doubleRAF } from '../../_utils/doubleRAF'
+
+  export default {
+    oncreate () {
+      doubleRAF(() => {
+        this.set({ shown: true }) // ensure fade-in animation happens after rAF
+      })
+    },
+    data: () => ({
+      shown: false
+    })
+  }
+</script>