feat: select and dropdown add animation

Author: igauch

src/dropdown/dropdown.directive.ts

@@ -73,6 +73,8 @@ export class DropdownDirective extends BaseTooltip implements OnInit {
     this.type = TooltipType.Plain;
     this.position = 'bottom end';
     this.trigger = TooltipTrigger.Click;
+    this.disableAnimation = false;
+    this.animationType = 'scaleY';
   }
 
   ngOnInit() {

src/dropdown/submenu/submenu.component.html

@@ -1,7 +1,7 @@
 <button
   [class]="className"
   [auiTooltip]="menu.template"
-  [auiDisableAnimation]="true"
+  auiTooltipAnimationType="scaleY"
   [auiTooltipDisabled]="disabled"
   [auiTooltipTrigger]="trigger"
   [auiTooltipHideOnClick]="true"

src/select/multi-select/multi-select.component.html

@@ -3,7 +3,7 @@
   #selectRef
   #tooltipRef="auiTooltip"
   [auiTooltip]="templateRef"
-  [auiDisableAnimation]="true"
+  auiTooltipAnimationType="scaleY"
   [auiTooltipDisabled]="disabled"
   auiTooltipTrigger="click"
   auiTooltipPosition="bottom start"

src/select/select.component.html

@@ -7,7 +7,7 @@
   #selectRef
   #tooltipRef="auiTooltip"
   [auiTooltip]="templateRef"
-  [auiDisableAnimation]="true"
+  auiTooltipAnimationType="scaleY"
   [auiTooltipDisabled]="disabled"
   auiTooltipTrigger="click"
   auiTooltipPosition="bottom start"

src/tooltip/animations.ts

@@ -0,0 +1,51 @@
+import { animate, state, style, transition } from '@angular/animations';
+
+export const scale = [
+  state(
+    'scale-show',
+    style({
+      opacity: 1,
+      transform: 'scale(1)',
+    }),
+  ),
+  state(
+    'scale-hide,void',
+    style({
+      opacity: 0,
+      transform: 'scale(0)',
+    }),
+  ),
+  transition('scale-hide => scale-show, void => scale-show', [
+    animate('160ms cubic-bezier(0, 0, 0.2, 1)'),
+  ]),
+  transition('scale-show => scale-hide', [
+    animate('160ms cubic-bezier(0.38, 0, 0.24, 1)'),
+  ]),
+];
+
+export const scaleY = [
+  state(
+    'scaleY-show',
+    style({
+      opacity: 1,
+      transform: 'scaleY(1)',
+    }),
+  ),
+  state(
+    'scaleY-hide,void',
+    style({
+      opacity: 0,
+      transform: 'scaleY(0)',
+    }),
+  ),
+  transition('scaleY-hide => scaleY-show, void => scaleY-show', [
+    animate('160ms cubic-bezier(0, 0, 0.2, 1)'),
+  ]),
+  transition('scaleY-show => scaleY-hide', [
+    animate('160ms cubic-bezier(0.38, 0, 0.24, 1)'),
+  ]),
+];
+
+export const animations = [...scale, ...scaleY];
+
+export type AnimationType = 'scale' | 'scaleY';

src/tooltip/base-tooltip.ts

@@ -30,6 +30,7 @@ import {
 
 import { sleep } from '../utils';
 
+import { AnimationType } from './animations';
 import { TooltipComponent } from './tooltip.component';
 import { TooltipTrigger, TooltipType } from './tooltip.types';
 import { getOriginPosition, getOverlayPosition } from './utils';
@@ -134,6 +135,7 @@ export class BaseTooltip<T = any>
 
   hideOnClick = false;
   disableAnimation = true;
+  animationType: AnimationType = 'scale';
 
   visibleChange = new EventEmitter<boolean>();
 
@@ -254,6 +256,7 @@ export class BaseTooltip<T = any>
       inputPosition$: this.inputPosition$$.asObservable(),
       inputType$: this.inputType$$.asObservable(),
       disableAnimation: this.disableAnimation,
+      animationType: this.animationType,
     });
     this.componentIns.hide$.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this._disposeTooltip();
@@ -417,7 +420,7 @@ export class BaseTooltip<T = any>
       .position()
       .flexibleConnectedTo(this.elRef)
       .withGrowAfterOpen(true)
-      .withTransformOriginOn('.aui-tooltip')
+      .withTransformOriginOn('.aui-tooltip__transform-origin')
       .withPositions([
         { ...originPosition.main, ...overlayPosition.main },
         { ...originPosition.fallback, ...overlayPosition.fallback },

src/tooltip/tooltip.component.ts

@@ -1,10 +1,6 @@
 import {
-  style,
-  transition,
   trigger,
   AnimationEvent,
-  state,
-  animate,
 } from '@angular/animations';
 import { NgIf, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import {
@@ -27,6 +23,7 @@ import {
 
 import { Bem, buildBem, publishRef } from '../utils';
 
+import { animations, AnimationType } from './animations';
 import { TooltipType } from './tooltip.types';
 
 @Component({
@@ -36,37 +33,17 @@ import { TooltipType } from './tooltip.types';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
-  animations: [
-    trigger('showHide', [
-      state(
-        'show',
-        style({
-          opacity: 1,
-          transform: 'scale(1)',
-        }),
-      ),
-      state(
-        'hide,void',
-        style({
-          opacity: 0,
-          transform: 'scale(0)',
-        }),
-      ),
-      transition('* => show', [animate('160ms cubic-bezier(0, 0, 0.2, 1)')]),
-      transition('* => hide', [
-        animate('160ms cubic-bezier(0.38, 0, 0.24, 1)'),
-      ]),
-    ]),
-  ],
+  animations: [trigger('showHide', animations)],
   standalone: true,
   imports: [NgIf, NgTemplateOutlet, AsyncPipe],
 })
 export class TooltipComponent implements OnDestroy {
   text: string;
   template: TemplateRef<any>;
   bem: Bem = buildBem('aui-tooltip');
-  showHide: 'show' | 'hide' = 'hide';
+  showHide = 'scale-hide';
   disableAnimation = true;
+  animationType: AnimationType;
 
   inputContent$: Observable<string | TemplateRef<any>>;
   inputType$: Observable<TooltipType>;
@@ -103,6 +80,7 @@ export class TooltipComponent implements OnDestroy {
     inputClass$: Observable<string>;
     inputContext$: Observable<any>;
     disableAnimation?: boolean;
+    animationType?: string;
   }) {
     Object.assign(this, inputs);
     this.text$ = this.inputContent$.pipe(
@@ -131,9 +109,12 @@ export class TooltipComponent implements OnDestroy {
       map(([inputPosition, inputType, inputClass]) => {
         const b = this.bem.block();
         const dir = inputPosition.split(' ')[0];
-        return inputType === TooltipType.Plain
-          ? `${b}--${dir} ${inputClass}`
-          : `${b} ${b}--${inputType} ${b}--${dir} ${inputClass}`;
+        return (
+          `${b}--${dir} ${inputClass} ${this.bem.element(
+            'transform-origin',
+          )} ` +
+          (inputType === TooltipType.Plain ? '' : `${b} ${b}--${inputType}`)
+        );
       }),
       publishRef(),
     );
@@ -143,20 +124,20 @@ export class TooltipComponent implements OnDestroy {
   onAnimation(event: AnimationEvent) {
     const { phaseName, toState } = event;
     this.animating$$.next(phaseName === 'start');
-    if (toState === 'hide' && phaseName === 'done') {
+    if (toState.endsWith('-hide') && phaseName === 'done') {
       this.hide$.next(true);
     }
   }
 
   show() {
     this.beforeShow$.next(null);
-    this.showHide = 'show';
+    this.showHide = `${this.animationType}-show`;
     this.cdr.markForCheck();
   }
 
   hide() {
     this.beforeHide$.next(null);
-    this.showHide = 'hide';
+    this.showHide = `${this.animationType}-hide`;
     this.cdr.markForCheck();
   }
 }

src/tooltip/tooltip.directive.ts

@@ -1,5 +1,6 @@
 import { Directive, EventEmitter, Input, Output } from '@angular/core';
 
+import { AnimationType } from './animations';
 import { BaseTooltip } from './base-tooltip';
 
 @Directive({
@@ -29,4 +30,7 @@ export class TooltipDirective extends BaseTooltip {
 
   @Input('auiDisableAnimation')
   override disableAnimation = false;
+
+  @Input('auiTooltipAnimationType')
+  override animationType: AnimationType;
 }