From 50b10310e4104327a3577d347b1e4ce0a12c7c20 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 5 May 2022 13:49:00 +1000
Subject: Avoid case where transitionend doesn't trigger for low
 animation-delay

---
 src/components/Tile.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

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

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index f656b09..429973f 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -21,7 +21,7 @@ export default defineComponent({
 	data(){
 		return {
 			highlight: false, // Used to draw a colored outline on mouse hover
-			inTransition: false, // Used to prevent content overlap and overflow during transitions
+			inTransition: false, // Used to prevent content overlap and overflow during user-perceivable transitions
 			wasClicked: false, // Used to increase z-index during transition after this tile (or a child) is clicked
 			hasExpanded: false, // Set to true after an expansion transition ends, and false upon collapse
 				// Used to hide overflow on tile expansion, but not hide a sepSweptArea on subsequent transitions
@@ -216,7 +216,8 @@ export default defineComponent({
 		// For setting transition state (can be triggered externally, like via search and auto-mode)
 		pos: {
 			handler(newVal, oldVal){
-				if ((newVal[0] != oldVal[0] || newVal[1] != oldVal[1]) && !this.inTransition){
+				let valChanged = newVal[0] != oldVal[0] || newVal[1] != oldVal[1];
+				if (valChanged && this.uiOpts.tileChgDuration > 100 && !this.inTransition){
 					this.inTransition = true;
 				}
 			},
@@ -224,7 +225,8 @@ export default defineComponent({
 		},
 		dims: {
 			handler(newVal, oldVal){
-				if ((newVal[0] != oldVal[0] || newVal[1] != oldVal[1]) && !this.inTransition){
+				let valChanged = newVal[0] != oldVal[0] || newVal[1] != oldVal[1];
+				if (valChanged && this.uiOpts.tileChgDuration > 100 && !this.inTransition){
 					this.inTransition = true;
 				}
 			},
-- 
cgit v1.2.3

