From 7b4b7d658df7efaa04361a636d4db9ac466f3f72 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Sat, 25 Dec 2021 02:30:35 -0500
Subject: [PATCH] [+] Try to make collapse animation

---
 src/components/Collapse.vue | 39 +++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/components/Collapse.vue b/src/components/Collapse.vue
index 32c5acf..0508fc5 100644
--- a/src/components/Collapse.vue
+++ b/src/components/Collapse.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="collapse">
-        <h3 v-html="displayTitle"></h3>
-        <div class="content">
+        <h3 v-html="displayTitle" class="clickable" @click="show = !show"></h3>
+        <div class="content" :class="{hide: !show}">
             <slot></slot>
         </div>
     </div>
@@ -16,6 +16,8 @@ export default class Collapse extends Vue
 {
     @Prop() title!: string
 
+    show = false
+
     get displayTitle(): string
     {
         return decodeURIComponent(this.title)
@@ -25,6 +27,35 @@ export default class Collapse extends Vue
 
 <style lang="sass">
 .collapse
-    .content
-        display: none
+    .hide
+        animation: fadeout 1s
+        -webkit-animation: fadeout 1s
+        opacity: 0
+        max-height: 0
+        pointer-events: none
+
+    /* Chrome, Safari, Opera */
+    @-webkit-keyframes fadeout
+        from
+            display: block
+            visibility: visible
+            opacity: 1
+        to
+            transform: translateY(-100px)
+            display: none
+            visibility: hidden
+            opacity: 0
+            height: 0
+
+    *
+        transition: all 0.25s ease
+
+    h3
+        background-clip: padding-box
+
+    h3:after
+        content: '...'
+
+    h3:hover
+        background-color: rgba(255, 131, 115, 0.36)
 </style>