diff options
Diffstat (limited to 'src/components/TileTree.vue')
| -rw-r--r-- | src/components/TileTree.vue | 21 |
1 files changed, 19 insertions, 2 deletions
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> |