feat(module:float-button): add pop animation to float button menu (#9413)

Author: WwwHhhYran

components/float-button/float-button-group.component.spec.ts

@@ -149,6 +149,18 @@ describe('nz-float-button-group', () => {
         fixture.detectChanges();
         expect(resultEl.nativeElement.classList).not.toContain('ant-float-btn-group-right');
       });
+
+      it('should get correct animation class according to nzPlacement', () => {
+        fixture.detectChanges();
+        // @ts-ignore
+        const { enterAnimation, leaveAnimation } = groupComponent;
+        expect(enterAnimation()).toBe('ant-float-btn-enter-top');
+        expect(leaveAnimation()).toBe('ant-float-btn-leave-top');
+        testComponent.nzPlacement = 'right';
+        fixture.detectChanges();
+        expect(enterAnimation()).toBe('ant-float-btn-enter-right');
+        expect(leaveAnimation()).toBe('ant-float-btn-leave-right');
+      });
     });
   });
 });

components/float-button/float-button-group.component.ts

@@ -18,7 +18,6 @@ import {
   TemplateRef
 } from '@angular/core';
 
-import { fadeMotion } from 'ng-zorro-antd/core/animation';
 import { NzFourDirectionType, NzShapeSCType } from 'ng-zorro-antd/core/types';
 import { generateClassName } from 'ng-zorro-antd/core/util';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -34,13 +33,14 @@ const CLASS_NAME = 'ant-float-btn-group';
   exportAs: 'nzFloatButtonGroup',
   imports: [NzFloatButtonComponent, NzIconModule, NgTemplateOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [fadeMotion],
   template: `
     @if (!isMenuMode()) {
       <ng-container *ngTemplateOutlet="menu"></ng-container>
     } @else {
       @if (open()) {
-        <div class="ant-float-btn-group-wrap" @fadeMotion><ng-container *ngTemplateOutlet="menu"></ng-container></div>
+        <div class="ant-float-btn-group-wrap" [animate.enter]="enterAnimation()" [animate.leave]="leaveAnimation()">
+          <ng-container *ngTemplateOutlet="menu"></ng-container>
+        </div>
       }
       <nz-float-button
         class="ant-float-btn-group-trigger"
@@ -77,11 +77,13 @@ export class NzFloatButtonGroupComponent {
   readonly nzPlacement = input<NzFourDirectionType>('top');
   readonly nzOnOpenChange = output<boolean>();
 
-  protected dir = inject(Directionality).valueSignal;
-  protected open = linkedSignal<boolean>(() => !!this.nzOpen());
-  protected isMenuMode = computed(() => !!this.nzTrigger() && ['click', 'hover'].includes(this.nzTrigger() as string));
-  protected isControlledMode = computed(() => this.nzOpen() !== null);
-  protected class = computed<string[]>(() => {
+  protected readonly dir = inject(Directionality).valueSignal;
+  protected readonly open = linkedSignal<boolean>(() => !!this.nzOpen());
+  protected readonly isMenuMode = computed(
+    () => !!this.nzTrigger() && ['click', 'hover'].includes(this.nzTrigger() as string)
+  );
+  protected readonly isControlledMode = computed(() => this.nzOpen() !== null);
+  protected readonly class = computed<string[]>(() => {
     const shape = this.nzShape();
     const dir = this.dir();
     const classes = [CLASS_NAME, this.generateClass(shape)];
@@ -95,6 +97,8 @@ export class NzFloatButtonGroupComponent {
     }
     return classes;
   });
+  protected readonly enterAnimation = computed(() => `ant-float-btn-enter-${this.nzPlacement()}`);
+  protected readonly leaveAnimation = computed(() => `ant-float-btn-leave-${this.nzPlacement()}`);
 
   constructor() {
     effect(() => {

components/float-button/float-button-top.component.ts

@@ -31,7 +31,7 @@ import { Subject, Subscription } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 
 import { fadeMotion } from 'ng-zorro-antd/core/animation';
-import { NzConfigService, withConfigFactory } from 'ng-zorro-antd/core/config';
+import { withConfigFactory } from 'ng-zorro-antd/core/config';
 import { NzScrollService } from 'ng-zorro-antd/core/services';
 import { NzShapeSCType } from 'ng-zorro-antd/core/types';
 import { fromEventOutsideAngular, generateClassName } from 'ng-zorro-antd/core/util';
@@ -72,13 +72,12 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: t
   encapsulation: ViewEncapsulation.None
 })
 export class NzFloatButtonTopComponent implements OnInit {
-  public nzConfigService = inject(NzConfigService);
-  private scrollSrv = inject(NzScrollService);
-  private platform = inject(Platform);
-  private ngZone = inject(NgZone);
-  private directionality = inject(Directionality);
-  private destroyRef = inject(DestroyRef);
-  private document = inject(DOCUMENT);
+  private readonly scrollSrv = inject(NzScrollService);
+  private readonly platform = inject(Platform);
+  private readonly ngZone = inject(NgZone);
+  private readonly directionality = inject(Directionality);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly document = inject(DOCUMENT);
 
   readonly backTop = viewChild('backTop', { read: ElementRef });
 

components/float-button/style/animation.less

@@ -0,0 +1,49 @@
+/* stylelint-disable less/no-duplicate-variables */
+@import '../../style/themes/index';
+
+@float-btn-prefix-cls: ~'@{ant-prefix}-float-btn';
+@animation-duration: 0.3s;
+@slide-distance: 40px;
+
+.animation(@direction, @type) {
+  &-@{type}-@{direction} {
+    animation: ~"@{type}-@{direction}" @animation-duration ease-in-out;
+  }
+}
+
+.keyframes(@name; @from-opacity; @to-opacity; @from-transform; @to-transform) {
+  @keyframes @name {
+    from {
+      transform: @from-transform;
+      opacity: @from-opacity;
+    }
+
+    to {
+      transform: @to-transform;
+      opacity: @to-opacity;
+    }
+  }
+}
+
+.@{float-btn-prefix-cls} {
+  // animation class
+  .animation(top, enter);
+  .animation(top, leave);
+  .animation(bottom, enter);
+  .animation(bottom, leave);
+  .animation(left, enter);
+  .animation(left, leave);
+  .animation(right, enter);
+  .animation(right, leave);
+
+  // keyframes
+  .keyframes(enter-top; 0; 1; translateY(@slide-distance); translateY(0));
+  .keyframes(leave-top; 1; 0; translateY(0); translateY(@slide-distance));
+  .keyframes(enter-bottom; 0; 1; translateY(-@slide-distance); translateY(0));
+  .keyframes(leave-bottom; 1; 0; translateY(0); translateY(-@slide-distance));
+  .keyframes(enter-left; 0; 1; translateX(@slide-distance); translateX(0));
+  .keyframes(leave-left; 1; 0; translateX(0); translateX(@slide-distance));
+  .keyframes(enter-right; 0; 1; translateX(-@slide-distance); translateX(0));
+  .keyframes(leave-right; 1; 0; translateX(0); translateX(-@slide-distance));
+}
+

components/float-button/style/entry.less

@@ -1 +1,2 @@
-@import './index.less';
+@import './index.less';
+@import './animation.less';