diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Tile.vue | 3 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 21 |
2 files changed, 20 insertions, 4 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 5b0fbd1..feedc09 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -182,12 +182,11 @@ export default defineComponent({ onHeaderClick(){ this.$emit('header-clicked', {layoutNode: this.layoutNode, domNode: this.$el}); (this.$refs.nonLeaf as Element).classList.replace('shadow-highlight', 'shadow-normal'); + (this.$refs.sepSweptArea as Element).classList.replace('shadow-highlight', 'shadow-normal'); // Temporary changes during transition this.zIdx = 1; - this.overflow = 'hidden'; setTimeout(() => { this.zIdx = 0; - this.overflow = 'visible'; }, this.transitionDuration); }, onInnerHeaderClicked(data: {layoutNode: LayoutNode, domNode: HTMLElement}){ diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index a9ed667..c277556 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -81,9 +81,9 @@ export default defineComponent({ let success = this.layoutTree.tryLayoutOnCollapse([0,0], [this.width,this.height], layoutNode); if (!success){ // Trigger failure animation - domNode.classList.remove('animate-expand-shrink'); + domNode.classList.remove('animate-shrink-expand'); domNode.offsetWidth; // Triggers reflow - domNode.classList.add('animate-expand-shrink'); + domNode.classList.add('animate-shrink-expand'); //console.log('Unable to layout tree'); } }, @@ -130,4 +130,21 @@ export default defineComponent({ transform: scale(1, 1); } } +.animate-shrink-expand { + animation-name: shrink-expand; + animation-duration: 300ms; + animation-iteration-count: 1; + animation-timing-function: ease-in-out; +} +@keyframes shrink-expand { + from { + transform: translate3d(0,0,0) scale(1, 1); + } + 50% { + transform: translate3d(0,0,0) scale(0.9, 0.9); + } + to { + transform: translate3d(0,0,0) scale(1, 1); + } +} </style> |