Dialog transitions are not working after ModalService was replaced with LaunchDialogService

[marcinkapica]

The dialog/modal elements in Spartacus were always being opened and closed with a CSS transitions: transition: opacity 0.15s linear and transition: transform 0.3s ease-out. These transitions were depending on CSS classes .fade and .show that were being added to the modal HTML elements.

After refactoring our app from using ModalService to LaunchDialogService the transitions stopped working (modals are appearing/disappearing immediately). It looks that the issue origin is in the applyClasses() method of the LaunchRenderStrategy abstract class (see code fragment below). Both fade and show CSS classes are being added at the same time, so when the component renders on the page initially (according to the logic in the implementation classes e.g. InlineRenderStrategy or InlineRootRenderStrategy) it already has both of these classes. Because of that we don't see the transitions since there is no CSS recalculation caused by adding .show class to a rendered component that only had the .fade class initially.

  protected readonly dialogClasses = ['d-block', 'fade', 'modal', 'show']; // <- issue here
  
  ...
  
  protected applyClasses(
    component: ComponentRef<any>,
    dialogType: DIALOG_TYPE
  ): void {
    let classes = [];

    switch (dialogType) {
      case DIALOG_TYPE.DIALOG:
        classes = this.dialogClasses;
        this.renderer.addClass(this.document.body, 'modal-open');
        break;
      ...
    }

    for (const newClass of classes) {
      this.renderer.addClass(component.location.nativeElement, newClass);
    }
  }

Tell us the version of Spartacus
Library version: 6.7.x

To Reproduce
Open a modal using launchDialogService.openDialog() method and notice that there is no transition. There is also no transition when closing the modal.

Expected behavior
We should see a CSS transition effect when opening and closing the modals, instead of the modals appearing/disappearing immediately with no effect.

Screenshots
See the recording where we can see that there is no transition when opening the modal and we can see that the class show is already there when element renders initially. But when adding/removing the show class manually we can see the opacity transition and this is how it should look by default. Play on slower speed to see the difference mor clearly.

Screen.Recording.2024-02-13.at.12.57.02.mov

Desktop (please complete the following information):
OS: all
Browser: all
Version: all

Smartphone (please complete the following information):
Device: all
OS: all
Browser: all
Version: all