Add move-in animation

[byOsta]

Add following animations:

• Move in out
• Move in
• Move out
• Fade in
• Fade out

The move animations are a copy from the bootstrap ones.

Also add compatibility with animations on CustomLayouts if needed by adding the OverlayAnimationClass and ModalAnimationClass

e74640a6cb22bc29d24cd4ed628a37a4.mp4

[chrissainty]

@byOsta I appreciate this has been almost a year, but if you would be happy to resolve the conflicts we can get this merged.

[byOsta]

@byOsta I appreciate this has been almost a year, but if you would be happy to resolve the conflicts we can get this merged.

Resolved conflicts @chrissainty :).

This PR also fixes @0ptim PRs #558 by setting the default ModalAnimationType for the custom layout modal as ModalAnimationType.None.

[chrissainty]

Why is the div tag needed?

[chrissainty]

Removing it doesn't seem to effect anything

[byOsta]

This is needed for the css to be applied to CustomLayouts.

[chrissainty]

In what way? Just when it's removed everything looks to continue working as it did before and there doesn't seem to be any references to this element in the CSS, unless I've missed it?

[byOsta]

About the div...

This is without the div:
https://github.com/Blazored/Modal/assets/8792259/b1a629dd-fad1-4f51-9284-cc8765527ad1

This is with the div
https://github.com/Blazored/Modal/assets/8792259/4d12827a-e820-425f-bb6d-7191d8bcb945

Why does this happen?
Because of the Blazor CSS isolation
Without this change the custom layout that we have for the modals wont have the custom BlazoredModalInstance.razor.css styles applied...
I also had to add the following selectors on the BlazoredModalInstance.razor.css:

[chrissainty]

While testing I noticed that the move out animation doesn't seem to work. The move-in part works fine, but when dismissing the modal it just fades out a bit rather than sliding up.

[byOsta]

While testing I noticed that the move out animation doesn't seem to work. The move-in part works fine, but when dismissing the modal it just fades out a bit rather than sliding up.

Regarding this, yeah I noticed that too. I'm trying to debug it because it was working with the PR that I raised a year ago jajaja

[chrissainty]

Whatever has changed has effected all the other animations as well, they all just fade out now rather than animate out.

[byOsta]

Whatever has changed has effected all the other animations as well, they all just fade out now rather than animate out.

After reviewing what breaks it is this commit
Specifically this: protected override bool ShouldRender() => false;...

[byOsta]

Whatever has changed has effected all the other animations as well, they all just fade out now rather than animate out.

With this commit it's fixed.
The only comment not resolved it's the one related to the <div></div> and as I said it's needed to make the styles work with the custom layouts... If you remove them and go to the Custom Layout>Show Animated Modal on the samples you'll see that the animation stopped working.

[chrissainty]

In what way? Just when it's removed everything looks to continue working as it did before and there doesn't seem to be any references to this element in the CSS, unless I've missed it?