From a5c9ce0d755b9aa6183ea5df519920b1086da07c Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 20 Mar 2022 22:38:00 +1100
Subject: Add distinct failed-header-collapse animation

---
 src/components/TileTree.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

(limited to 'src/components/TileTree.vue')

diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue
index a9ed667..c277556 100644
--- a/src/components/TileTree.vue
+++ b/src/components/TileTree.vue
@@ -81,9 +81,9 @@ export default defineComponent({
 			let success = this.layoutTree.tryLayoutOnCollapse([0,0], [this.width,this.height], layoutNode);
 			if (!success){
 				// Trigger failure animation
-				domNode.classList.remove('animate-expand-shrink');
+				domNode.classList.remove('animate-shrink-expand');
 				domNode.offsetWidth; // Triggers reflow
-				domNode.classList.add('animate-expand-shrink');
+				domNode.classList.add('animate-shrink-expand');
 				//console.log('Unable to layout tree');
 			}
 		},
@@ -130,4 +130,21 @@ export default defineComponent({
 		transform: scale(1, 1);
 	}
 }
+.animate-shrink-expand {
+	animation-name: shrink-expand;
+	animation-duration: 300ms;
+	animation-iteration-count: 1;
+	animation-timing-function: ease-in-out;
+}
+@keyframes shrink-expand {
+	from {
+		transform: translate3d(0,0,0) scale(1, 1);
+	}
+	50% {
+		transform: translate3d(0,0,0) scale(0.9, 0.9);
+	}
+	to {
+		transform: translate3d(0,0,0) scale(1, 1);
+	}
+}
 </style>
-- 
cgit v1.2.3

