diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-05-24 12:37:57 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-05-24 12:37:57 +1000 |
| commit | a4707168077df7d01cfe48b2f6c687625b8b698f (patch) | |
| tree | 5b2fa801ac0c4f24ce0602a8023863826e5a3721 | |
| parent | 2824ec8bfbea23dad75c4908a73a483c044a8b47 (diff) | |
Make compound-image sub-images not gradually resize during transitionforce-compound-img-end-size
| -rw-r--r-- | src/components/Tile.vue | 8 |
1 files changed, 6 insertions, 2 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 4e07113..9f00913 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -171,6 +171,7 @@ export default defineComponent({ display: 'grid', gridTemplateColumns: '1fr', // Other + backgroundColor: '#1c1917', borderRadius: 'inherit', }; } @@ -416,6 +417,7 @@ export default defineComponent({ }, // Other leafSubImgStyles(idx: number): Record<string,string> { + let [w, h] = this.layoutNode.dims; return { width: '100%', height: '100%', @@ -427,8 +429,10 @@ export default defineComponent({ backgroundColor: '#1c1917', 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', + clipPath: idx == 0 ? + `polygon(0 0, ${w}px 0, 0 ${h}px)` : + `polygon(${w}px 0, 0 ${h}px, ${w}px ${h}px)`, + backgroundPosition: idx == 0 ? `${-w/4}px ${-h/4}px` : `${w/4}px ${h/4}px`, }; }, onTransitionEnd(evt: Event){ |