From aff3aa7ed21a2c8d29243155b85338372f7a0a0c Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Sat, 25 Jan 2025 12:37:24 -0300
Subject: [PATCH] feat: add new animation to transactions action bar

---
 .../cotton/ui/transactions_action_bar.html    |  5 ++-
 frontend/src/styles/_animations.scss          | 32 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/app/templates/cotton/ui/transactions_action_bar.html b/app/templates/cotton/ui/transactions_action_bar.html
index 0eb4e56..5c08b24 100644
--- a/app/templates/cotton/ui/transactions_action_bar.html
+++ b/app/templates/cotton/ui/transactions_action_bar.html
@@ -2,7 +2,9 @@
 <div class="tw-sticky tw-bottom-4 tw-left-0 tw-right-0 tw-z-50 tw-hidden mx-auto tw-w-fit" id="actions-bar"
      _="on change from #transactions-list or htmx:afterSettle from window
           if no <input[type='checkbox']:checked/> in #transactions-list
-            add .tw-hidden to #actions-bar
+            add .slide-in-bottom-reverse then settle
+            then add .tw-hidden to #actions-bar
+            then remove .slide-in-bottom-reverse
           else
             remove .tw-hidden from #actions-bar
             then trigger selected_transactions_updated
@@ -10,6 +12,7 @@
         end">
   <div class="card slide-in-left">
     <div class="card-body p-2">
+  <div class="card slide-in-bottom">
       {% spaceless %}
         <div class="btn-group" role="group">
           <button class="btn btn-secondary btn-sm"
diff --git a/frontend/src/styles/_animations.scss b/frontend/src/styles/_animations.scss
index 5b9c135..b96a958 100644
--- a/frontend/src/styles/_animations.scss
+++ b/frontend/src/styles/_animations.scss
@@ -205,3 +205,35 @@
 .flashing {
   animation: flash 1s infinite;
 }
+
+
+.slide-in-bottom {
+	animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.slide-in-bottom-reverse {
+	animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2025-1-25 12:30:4
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation slide-in-bottom
+ * ----------------------------------------
+ */
+@keyframes slide-in-bottom {
+  0% {
+    transform: translateY(1000px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}