Skip to content

feat: provide easier way of extending/overriding built in animations #24964

Open
@crhistianramirez

Description

@crhistianramirez

Prerequisites

Describe the Feature Request

Export the already created animations for modals so that they can be publicly consumed by users of this library

Describe the Use Case

I understand that I can build my own animations which is great but sometimes I just want to tweak an existing animation slightly. Today the only way to do that is to bring the source code in to my project.

Describe Preferred Solution

Ideally, I would like to simply import the already created animations and then call the methods on the Animation object to enhance it for my purposes

Describe Alternatives

Perhaps an option when presenting the modal could pass to you the animation that would be used and allow you to act upon it before doing the final presentation.

Related Code

Here is an example of how I might expect this to work:

import { sheetEnterAnimation } from '@ionic/core';

export const myEnterAnimation = (
  baseEl: HTMLElement,
  opts: ModalAnimationOptions
): Animation => {
  const animation = sheetEnterAnimation(baseEl, opts);

  // here I'm moving the modal so it renders somewhere else but you can imagine any other tweaks
  // that are possible by hooking into the Animation object
  animation.beforeAddWrite(() => {
    const modal = document.querySelector('ion-modal');
    const appTabs = document.querySelector('app-tabs');
    appTabs.appendChild(modal);
  });

  return animation;
};

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions