diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-05-24 12:46:45 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-05-24 12:46:45 +1000 |
| commit | 7035e4bc55acc9471de8c5b02c3655d5f188a320 (patch) | |
| tree | 1374770648f9ae02127aa498566c5de85972aaaf /src/components/Tile.vue | |
| parent | 2824ec8bfbea23dad75c4908a73a483c044a8b47 (diff) | |
Reduce compound-image sub-image movement during transition
Diffstat (limited to 'src/components/Tile.vue')
| -rw-r--r-- | src/components/Tile.vue | 3 |
1 files changed, 2 insertions, 1 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 4e07113..df5c024 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -416,6 +416,7 @@ export default defineComponent({ }, // Other leafSubImgStyles(idx: number): Record<string,string> { + let [w, h] = this.layoutNode.dims; return { width: '100%', height: '100%', @@ -428,7 +429,7 @@ export default defineComponent({ backgroundSize: '125%', borderRadius: 'inherit', clipPath: idx == 0 ? 'polygon(0 0, 100% 0, 0 100%)' : 'polygon(100% 0, 0 100%, 100% 100%)', - backgroundPosition: idx == 0 ? 'right bottom' : 'left top', + backgroundPosition: idx == 0 ? `${-w/4}px ${-h/4}px` : `${w/4}px ${h/4}px`, }; }, onTransitionEnd(evt: Event){ |