fixed #7081 - laggy tab open/close animation

tabby-core/src/components/appRoot.component.pug

@@ -25,7 +25,7 @@ title-bar(
                 [index]='idx',
                 [tab]='tab',
                 [active]='tab == app.activeTab',
-                @animateTab,
+                [@animateTab]='{value: "in", params: {size: targetTabSize}}',
                 [@.disabled]='hasVerticalTabs() || !config.store.accessibility.animations',
                 (click)='app.selectTab(tab)',
                 [class.fully-draggable]='hostApp.platform != Platform.macOS',

tabby-core/src/components/appRoot.component.ts

@@ -17,38 +17,47 @@ import { TabBodyComponent } from './tabBody.component'
 import { SplitTabComponent } from './splitTab.component'
 import { AppService, FileTransfer, HostWindowService, PlatformService, ToolbarButton, ToolbarButtonProvider } from '../api'
 
+function makeTabAnimation (dimension: string, size: number) {
+    return [
+        state('in', style({
+            'flex-basis': '{{size}}',
+            [dimension]: '{{size}}',
+        }), {
+            params: { size: `${size}px` },
+        }),
+        transition(':enter', [
+            style({
+                'flex-basis': '1px',
+                [dimension]: '1px',
+            }),
+            animate('250ms ease-out', style({
+                'flex-basis': '{{size}}',
+                [dimension]: '{{size}}',
+            })),
+        ]),
+        transition(':leave', [
+            style({
+                'flex-basis': 'auto',
+                'padding-left': '*',
+                'padding-right': '*',
+                [dimension]: '*',
+            }),
+            animate('250ms ease-in-out', style({
+                'padding-left': 0,
+                'padding-right': 0,
+                [dimension]: '0',
+            })),
+        ]),
+    ]
+}
+
 /** @hidden */
 @Component({
     selector: 'app-root',
     template: require('./appRoot.component.pug'),
     styles: [require('./appRoot.component.scss')],
     animations: [
-        trigger('animateTab', [
+        trigger('animateTab', makeTabAnimation('width', 200)),
-            state('in', style({
-                'flex-basis': 'auto',
-                width: 'auto',
-            })),
-            transition(':enter', [
-                style({
-                    'flex-basis': '1px',
-                    width: '1px',
-                }),
-                animate('250ms ease-in-out', style({
-                    'flex-basis': 'auto',
-                    width: 'auto',
-                })),
-            ]),
-            transition(':leave', [
-                style({
-                    'flex-basis': 'auto',
-                    width: 'auto',
-                }),
-                animate('250ms ease-in-out', style({
-                    'flex-basis': '1px',
-                    width: '1px',
-                })),
-            ]),
-        ]),
     ],
 })
 export class AppRootComponent {
@@ -196,6 +205,13 @@ export class AppRootComponent {
         return this.config.store.appearance.tabsLocation === 'left' || this.config.store.appearance.tabsLocation === 'right'
     }
 
+    get targetTabSize (): any {
+        if (this.hasVerticalTabs()) {
+            return '*'
+        }
+        return this.config.store.appearance.flexTabs ? '*' : '200px'
+    }
+
     async generateButtonSubmenu (button: ToolbarButton) {
         if (button.submenu) {
             button.submenuItems = await button.submenu()

tabby-core/src/components/tabHeader.component.scss

@@ -3,17 +3,15 @@ $tabs-height: 38px;
 :host {
     position: relative;
     cursor: pointer;
+    box-sizing: content-box;
 
     > * { cursor: pointer; }
 
     flex: 1000 1 200px;
     width: 200px;
-    padding: 0 10px;
+    // flex-basis and width are also set through animation on AppRoot
 
-    &.flex-width {
+    padding: 0 10px;
-        flex: 1000 1 auto;
-        width: auto;
-    }
 
     display: flex;
     flex-direction: row;
@@ -21,6 +19,11 @@ $tabs-height: 38px;
 
     overflow: hidden;
 
+    &.flex-width {
+        flex: 1000 1 auto;
+        width: auto;
+    }
+
     &.vertical {
       flex: none;
       height: $tabs-height;