From 6ac28c73575e54b0e92e84174fd0b5d4a497f1d5 Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Fri, 28 Oct 2022 10:46:50 +0200
Subject: [PATCH] really fix scroll bottom with keyframes

---
 client/src/components/ScrollToBottom.tsx |  2 +-
 client/tailwind.config.cjs               | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/src/components/ScrollToBottom.tsx b/client/src/components/ScrollToBottom.tsx
index 1c199c7..f353cdb 100644
--- a/client/src/components/ScrollToBottom.tsx
+++ b/client/src/components/ScrollToBottom.tsx
@@ -37,7 +37,7 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
       </div>
       <button
         onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
-        className={'absolute right-3 transition-all' + (show ? ' bottom-3' : ' -mb-10')}
+        className={'absolute right-3 ' + (show ? 'animate-show bottom-3 block' : 'animate-hide hidden bottom-0 -mb-10')}
       >
         <div className="popup-btn cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
           <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs
index c6a6a85..07ba566 100644
--- a/client/tailwind.config.cjs
+++ b/client/tailwind.config.cjs
@@ -19,6 +19,22 @@ module.exports = {
       padding: {
         '2.5': '0.625rem',
       },
+      keyframes: {
+        'hide': {
+          '0%': { opacity: 1, display: 'block' },
+          '99%': { opacity: 0, display: 'block' },
+          '100%': { opacity: 0, display: 'none' },
+        },
+        'show': {
+          '0%': { opacity: 0, display: 'none' },
+          '1%': { opacity: 0, display: 'block' },
+          '100%': { opacity: 1, display: 'block' },
+        },
+      },
+      animation: {
+        'hide': 'hide 0.2s ease-in-out',
+        'show': 'show 0.2s ease-in-out',
+      },
     },
   },
   plugins: [],