Customize Built-in Animation of NzModalService in NG-ZORRO v16.2.2?

Discussão em 'Angular' iniciado por Vahe Abrahamyan, Fevereiro 8, 2025.

  1. I'm using NG-ZORRO v16.2.2, and I've noticed that when calling NzModalService.create(), the modal animation starts from the last click position. The modal appears to scale up from that point while increasing its opacity.

    This effect makes it look like the modal originates from the clicked button's position.

    When I want to animation start from the vertically and horizontally center of viewport.

    • Is there a way to disable or customize this built-in animation in v16.2.2?
    • If it's not configurable via the API, is there any workaround to override this animation properly?

    1. Searching for API settings:
      I checked the NG-ZORRO modal documentation, but:
      • It only provides the latest version (currently v19.0.2), not the v16.2.2 API.
      • Even in v19.0.2, I couldn't find any option to change the animation style.

    2. Applying custom CSS animations:
      • I attempted to override the animation using CSS by setting custom keyframes with specific start and end positions.
      • However, if the animation duration is too short, it doesn't appear properly.
      • If the duration is long enough, NzModalService runs both animations simultaneously—first showing the built-in animation, then briefly hiding the modal before applying my custom animation.

    Continue reading...

Compartilhe esta Página