support disabling animations on panels

apps/demo/src/app/demo/demo.component.html

@@ -24,6 +24,7 @@
     [attr.absolute]="inputs.top.absolute"
     [attr.collapsed]="inputs.top.collapsed"
     [attr.resize-disabled]="inputs.top.resizeDisabled"
+    [attr.animation-disabled]="inputs.top.animationDisabled"
     (resized)="onResized('top', $event)"
     (backdropClicked)="onBackdropClicked('top')"
   >
@@ -39,6 +40,7 @@
     [attr.absolute]="inputs.right.absolute"
     [attr.collapsed]="inputs.right.collapsed"
     [attr.resize-disabled]="inputs.right.resizeDisabled"
+    [attr.animation-disabled]="inputs.right.animationDisabled"
     (resized)="onResized('right', $event)"
     (backdropClicked)="onBackdropClicked('right')"
   >
@@ -54,6 +56,7 @@
     [attr.absolute]="inputs.bottom.absolute"
     [attr.collapsed]="inputs.bottom.collapsed"
     [attr.resize-disabled]="inputs.bottom.resizeDisabled"
+    [attr.animation-disabled]="inputs.bottom.animationDisabled"
     (resized)="onResized('bottom', $event)"
     (backdropClicked)="onBackdropClicked('bottom')"
   >
@@ -69,6 +72,7 @@
     [attr.absolute]="inputs.left.absolute"
     [attr.collapsed]="inputs.left.collapsed"
     [attr.resize-disabled]="inputs.left.resizeDisabled"
+    [attr.animation-disabled]="inputs.left.animationDisabled"
     (resized)="onResized('left', $event)"
     (backdropClicked)="onBackdropClicked('left')"
   >

apps/demo/src/lib/components/editor/editor-form.component.html

@@ -183,7 +183,10 @@
   <mat-checkbox [formControl]="formControls.absolute">Absolute</mat-checkbox>
   <mat-checkbox [formControl]="formControls.collapsed">Collapsed</mat-checkbox>
   <mat-checkbox [formControl]="formControls.remove">Remove</mat-checkbox>
-  <mat-checkbox [formControl]="formControls.resizeDisabled"
-    >Resize disabled</mat-checkbox
-  >
+  <mat-checkbox [formControl]="formControls.resizeDisabled">
+    Resize disabled
+  </mat-checkbox>
+  <mat-checkbox [formControl]="formControls.animationDisabled">
+    Animation disabled
+  </mat-checkbox>
 </ng-template>

apps/demo/src/lib/components/editor/editor-form.component.ts

@@ -71,6 +71,11 @@ export class EditorFormComponent {
         this.panelFormControls[slot].resizeDisabled
       );
 
+      connectFormValue(
+        this.layoutRx[slot].animationDisabled,
+        this.panelFormControls[slot].animationDisabled
+      );
+
       connectFormValue(
         this.layoutRx.remove[slot],
         this.panelFormControls[slot].remove
@@ -113,6 +118,7 @@ export class EditorFormComponent {
       this.layoutRx.layout.resizeToggleSize,
       this.resizeFormControls.resizeToggleSize
     );
+
     connectFormValue(
       this.layoutRx.layout.resizeDisabled,
       this.resizeFormControls.resizeDisabled
@@ -152,6 +158,7 @@ export class EditorFormComponent {
       absolute: new FormControl(),
       collapsed: new FormControl(),
       resizeDisabled: new FormControl(),
+      animationDisabled: new FormControl(),
     };
   }
 }

libs/angular/src/lib/components/panel/panel.component.ts

@@ -106,6 +106,17 @@ export class BergPanelComponent
   }
   private _maxSize: number | null = this.getDefaultInput('maxSize');
 
+  @Input()
+  get animationDisabled(): boolean {
+    return this._animationDisabled;
+  }
+  set animationDisabled(value: boolean | null) {
+    this._animationDisabled = coerceBooleanProperty(
+      value ?? this.getDefaultInput('animationDisabled')
+    );
+  }
+  private _animationDisabled = this.getDefaultInput('animationDisabled');
+
   @Input()
   get eventBindingMode() {
     return this._eventBindingMode;

libs/core/src/lib/components/layout/layout-config-private.ts

@@ -6,6 +6,7 @@ export const BERG_LAYOUT_BOTTOM_BELOW_LEFT_CLASS =
   'berg-layout-bottom-below-left';
 export const BERG_LAYOUT_BOTTOM_BELOW_RIGHT_CLASS =
   'berg-layout-bottom-below-right';
+export const BERG_LAYOUT_RESIZE_TOGGLE_CLASS = 'berg-layout-resize-toggle';
 export const BERG_LAYOUT_RESIZING_VERTICAL_CLASS =
   'berg-layout-resizing-vertical';
 export const BERG_LAYOUT_RESIZING_HORIZONTAL_CLASS =

libs/core/src/lib/components/layout/layout.ts

@@ -14,6 +14,7 @@ import {
   BERG_LAYOUT_CLASS,
   BERG_LAYOUT_OVERFLOW_X_CLASS,
   BERG_LAYOUT_OVERFLOW_Y_CLASS,
+  BERG_LAYOUT_RESIZE_TOGGLE_CLASS,
   BERG_LAYOUT_TOP_ABOVE_LEFT_CLASS,
   BERG_LAYOUT_TOP_ABOVE_RIGHT_CLASS,
 } from './layout-config-private';
@@ -40,6 +41,13 @@ export class BergLayoutElement extends WebComponent<BergLayoutInputs> {
     left: 0,
   };
 
+  private disabledAnimations: Record<BergPanelSlot, boolean> = {
+    top: false,
+    right: false,
+    bottom: false,
+    left: false,
+  };
+
   constructor() {
     super(
       BERG_LAYOUT_DEFAULT_INPUTS,
@@ -175,6 +183,38 @@ export class BergLayoutElement extends WebComponent<BergLayoutInputs> {
     }
   }
 
+  updateAnimationDisabled(slot: BergPanelSlot, disable: boolean): void {
+    this.disabledAnimations[slot] = disable;
+
+    const transitionProperties = [];
+
+    if (!this.disabledAnimations.top) {
+      transitionProperties.push('top');
+    }
+
+    if (!this.disabledAnimations.right) {
+      transitionProperties.push('right');
+    }
+
+    if (!this.disabledAnimations.bottom) {
+      transitionProperties.push('bottom');
+    }
+
+    if (!this.disabledAnimations.left) {
+      transitionProperties.push('left');
+    }
+
+    this.style.setProperty(
+      '--berg-panel-transition-property',
+      transitionProperties.join(', ')
+    );
+
+    this.style.setProperty(
+      '--berg-layout-transition-property',
+      transitionProperties.map((property) => `padding-${property}`).join(', ')
+    );
+  }
+
   getSlotSize(slot: BergPanelSlot): number {
     return this.sizes[slot];
   }
@@ -265,8 +305,8 @@ export class BergLayoutElement extends WebComponent<BergLayoutInputs> {
     const div = document.createElement('div');
 
     div.classList.add(
-      'berg-panel-resize-toggle',
-      `berg-panel-resize-toggle-${slot}`
+      BERG_LAYOUT_RESIZE_TOGGLE_CLASS,
+      `${BERG_LAYOUT_RESIZE_TOGGLE_CLASS}-${slot}`
     );
 
     return div;

libs/core/src/lib/components/panel/panel-config-private.ts

@@ -8,6 +8,7 @@ export const BERG_PANEL_RESIZE_DISABLED_CLASS = 'berg-panel-resize-disabled';
 export const BERG_PANEL_RESIZING_CLASS = 'berg-panel-resizing';
 export const BERG_PANEL_CLASS = 'berg-panel';
 export const BERG_PANEL_VERTICAL_CLASS = 'berg-panel-vertical';
+export const BERG_PANEL_NO_TRANSITION_CLASS = 'berg-panel-no-transition';
 
 export const BERG_PANEL_CLASSES_BY_SLOT: Record<BergPanelSlot, string> = {
   top: 'berg-panel-top',

libs/core/src/lib/components/panel/panel-config.ts

@@ -18,6 +18,7 @@ export const BERG_PANEL_DEFAULT_INPUTS: RequireAll<BergPanelInputs> = {
   size: 100,
   minSize: 50,
   maxSize: null,
+  animationDisabled: false,
 };
 
 export const BERG_PANEL_ATTRIBUTE_BY_INPUT: WebComponentAttributeByInput<BergPanelInputs> =
@@ -30,6 +31,7 @@ export const BERG_PANEL_ATTRIBUTE_BY_INPUT: WebComponentAttributeByInput<BergPan
     size: 'size',
     minSize: 'min-size',
     maxSize: 'max-size',
+    animationDisabled: 'animation-disabled',
   };
 
 export const BERG_PANEL_INPUT_BY_ATTRIBUTE: WebComponentInputByAttribute<BergPanelInputs> =

libs/core/src/lib/components/panel/panel-model.ts

@@ -24,6 +24,9 @@ export interface BergPanelInputs {
   /** Max size of the panel in px. */
   maxSize: number | null;
 
+  /** Whether panel animations are disabled. */
+  animationDisabled: boolean;
+
   /**
    * Controls how panel events update panel inputs.
    * With "auto", panel events automatically update panel inputs.

libs/core/src/lib/components/panel/panel.ts

@@ -45,6 +45,7 @@ import {
   BERG_PANEL_COLLAPSED_CLASS,
   BERG_PANEL_ENABLE_ANIMATION_DELAY,
   BERG_PANEL_HORIZONTAL_CLASS,
+  BERG_PANEL_NO_TRANSITION_CLASS,
   BERG_PANEL_PREVIEWING_CLASS,
   BERG_PANEL_RESIZE_DISABLED_CLASS,
   BERG_PANEL_RESIZING_CLASS,
@@ -169,6 +170,7 @@ export class BergPanelElement extends WebComponent<BergPanelInputs> {
         resizeDisabled: coerceBooleanProperty,
         minSize: coerceNumberProperty,
         maxSize: coerceNumberProperty,
+        animationDisabled: coerceBooleanProperty,
         eventBindingMode: (value: string) => validateOutputBindingMode(value),
       },
       {
@@ -212,6 +214,18 @@ export class BergPanelElement extends WebComponent<BergPanelInputs> {
         size: () => this.updateSize(this.values['size']),
         minSize: () => this.updateSize(this.values['size']),
         maxSize: () => this.updateSize(this.values['size']),
+        animationDisabled: () => {
+          this.layout.updateAnimationDisabled(
+            this.values.slot,
+            this.values.animationDisabled
+          );
+
+          if (this.values.animationDisabled) {
+            this.classList.add(BERG_PANEL_NO_TRANSITION_CLASS);
+          } else {
+            this.classList.remove(BERG_PANEL_NO_TRANSITION_CLASS);
+          }
+        },
         slot: () => {
           this.classList.remove(...Object.values(BERG_PANEL_CLASSES_BY_SLOT));
           this.classList.add(BERG_PANEL_CLASSES_BY_SLOT[this.values.slot]);
@@ -249,7 +263,13 @@ export class BergPanelElement extends WebComponent<BergPanelInputs> {
     }
 
     this.layout.shadowRoot.appendChild(backdrop);
-    requestAnimationFrame(() => (backdrop.style.opacity = '1'));
+
+    if (this.values.animationDisabled) {
+      backdrop.style.opacity = '1';
+    } else {
+      requestAnimationFrame(() => (backdrop.style.opacity = '1'));
+    }
+
     this.backdropElement.style.pointerEvents = 'auto';
   }
 
@@ -263,13 +283,15 @@ export class BergPanelElement extends WebComponent<BergPanelInputs> {
     this.backdropElement.style.opacity = '0';
     this.backdropElement.style.pointerEvents = 'none';
 
-    this.timeouts.push(
-      setTimeout(() => {
-        if (this.layout.shadowRoot) {
-          this.layout.shadowRoot.removeChild(backdrop);
-        }
-      }, BERG_PANEL_BACKDROP_ANIMATION_DURATION)
-    );
+    if (this.values.animationDisabled) {
+      this.layout.shadowRoot.removeChild(backdrop);
+    } else {
+      this.timeouts.push(
+        setTimeout(() => {
+          this.layout.shadowRoot?.removeChild(backdrop);
+        }, BERG_PANEL_BACKDROP_ANIMATION_DURATION)
+      );
+    }
   }
 
   private updateBackdrop(): void {

libs/core/src/lib/styles/_core.scss

@@ -1,5 +1,6 @@
 // should match the configured transition duration
-$transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+$transition-duration: 0.4s;
+$transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
 
 // applies styles outside of the shadow dom
 @mixin core($overrides: ()) {
@@ -17,8 +18,9 @@ $transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
       box-sizing: border-box;
       position: relative;
       z-index: 0;
-      transition-property: padding;
-      transition: $transition;
+      transition-duration: $transition-duration;
+      transition-timing-function: $transition-timing-function;
+      transition-property: var(--berg-layout-transition-property);
     }
 
     &.berg-layout-overflow-x {
@@ -52,8 +54,13 @@ $transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
     display: block;
     position: relative;
     box-sizing: border-box;
-    transition-property: top, left, right, bottom, box-shadow;
-    transition: $transition;
+    transition-duration: $transition-duration;
+    transition-timing-function: $transition-timing-function;
+    transition-property: var(--berg-panel-transition-property), box-shadow;
+
+    &.berg-panel-no-transition {
+      transition-property: box-shadow;
+    }
 
     .berg-layout-no-transition & {
       transition: none;

libs/react/src/lib/panel/panel.tsx

@@ -21,6 +21,7 @@ export function BergPanel(props: BergPanelProps) {
       size={props.size}
       min-size={props.minSize}
       max-size={props.maxSize}
+      animation-disabled={props.animationDisabled}
       event-binding-mode={props.eventBindingMode}
     >
       {props.children}