diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-05-05 13:49:00 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-05-05 14:07:29 +1000 |
| commit | 50b10310e4104327a3577d347b1e4ce0a12c7c20 (patch) | |
| tree | 98719aa5d17a4cdf290be11a72edef636c48393e | |
| parent | 6bb1d2e369512bec91ecc0c63238f4ad4c54c528 (diff) | |
Avoid case where transitionend doesn't trigger for low animation-delay
| -rw-r--r-- | src/components/Tile.vue | 8 |
1 files changed, 5 insertions, 3 deletions
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; } }, |