From caa8a7a72aebc05de55c405a60a6e2eb6c4ff503 Mon Sep 17 00:00:00 2001
From: kickstertm <78946365+kickstertm@users.noreply.github.com>
Date: Sun, 5 Sep 2021 02:41:15 +0300
Subject: [PATCH] Animation added

---
 src/components/Animate/Animations.js  | 8 ++++++++
 src/components/Contact/ContactList.js | 9 +++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Animate/Animations.js

diff --git a/src/components/Animate/Animations.js b/src/components/Animate/Animations.js
new file mode 100644
index 0000000..c05d702
--- /dev/null
+++ b/src/components/Animate/Animations.js
@@ -0,0 +1,8 @@
+export const slideBottom = {
+  show: {
+    y: 0,
+  },
+  hide: {
+    y: -20,
+  },
+};
diff --git a/src/components/Contact/ContactList.js b/src/components/Contact/ContactList.js
index a4324f4..4c180cb 100644
--- a/src/components/Contact/ContactList.js
+++ b/src/components/Contact/ContactList.js
@@ -5,6 +5,8 @@ import {
   deleteContactAction,
   setFormUpdateContactAction,
 } from "../../store/actions/contactActions";
+import { motion } from "framer-motion";
+import { slideBottom } from "../Animate/Animations";
 
 const ContactList = () => {
   const dispatch = useDispatch();
@@ -15,7 +17,10 @@ const ContactList = () => {
       {contacts.contacts.length > 0 &&
         contacts.contacts.map((contact, key) => {
           return (
-            <aside
+            <motion.aside
+              variants={slideBottom}
+              initial="hide"
+              animate="show"
               key={key}
               className={`bg-opacity-50 rounded-xl w-full lg:w-8/12 px-5 py-3 flex items-center justify-between ${
                 contacts.form.id == contact.id ? "bg-green-200" : "bg-white"
@@ -47,7 +52,7 @@ const ContactList = () => {
                   <CgTrashEmpty />
                 </div>
               </div>
-            </aside>
+            </motion.aside>
           );
         })}
     </main>