From 50b10310e4104327a3577d347b1e4ce0a12c7c20 Mon Sep 17 00:00:00 2001 From: Terry Truong 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') 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