Feature/animations

README.md

@@ -381,6 +381,31 @@ Or in the `Modal.Show()` method:
 }
 ```
 
+#### Animation
+The modal also supports some animations.
+
+The following animation types are available out of the box: `ModalAnimation.FadeIn`, `ModalAnimation.FadeOut` and `ModalAnimation.FadeInOut`.
+
+Use the `Animation` parameter to set the custom styling globally:
+
+`<BlazoredModal Animation="@ModalAnimation.FadeIn(2)"/>`
+
+Or in the `Modal.Show()` method:
+
+```razor
+@code {
+    void ShowModal()
+    {
+        var options = new ModalOptions() 
+        { 
+            Animation = ModalAnimation.FadeInOut(1)
+        };
+
+        Modal.Show<Movies>("My Movies", options);
+    }
+}
+```
+
 ### Multiple Modals
 
 It's possible to have multiple active modal instances at a time. You can find a working example of this in the sample projects but here is some sample code.

docs/src/customisation-options/animation.md

@@ -0,0 +1,29 @@
+# Animation
+How to customise the animation of modals.
+
+---
+
+By default, Blazored Modal supports 2 different animations: Fade-in and Fade-out. These 2 can also be combined to both fade-in and fade-out. By default no animation is used. If you want to use an animation for the modal, you can set one globally or per modal. 
+
+## Setting Animation Globally
+
+To set a global animation for all modals in your application, you can set the `Animation` parameter on the `BlazoredModal` component in your `MainLayout`. Below sets a Fade-in animation with a duration of 2 seconds.
+
+```html
+@inherits LayoutComponentBase
+
+<BlazoredModal Animation="@ModalAnimation.FadeIn(2)"/>
+
+<!-- Other code removed for brevity -->
+```
+
+## Setting Animation Per Modal
+
+To set the Animation of a specific modal instance you can pass in a `ModalOptions` object when calling `Show`. Below exapmle will add a Fade-in and Fade-out animation, which will take 1 second each.
+
+```csharp
+var options = new ModalOptions { Animation = ModalAnimation.FadeInOut(1)};
+
+_ = Modal.Show<Confirm>("My Modal", options);
+```
+

docs/src/customisation-options/toc.yml

@@ -27,4 +27,6 @@
     - name: Hide Header
       href: hide-header.md
     - name: Hide Close Button
-      href: hide-close-button.md
+      href: hide-close-button.md
+    - name: Animation
+      href: animation.md

docs/src/getting-started/toc.yml

@@ -27,4 +27,6 @@
     - name: Hide Header
       href: ../customisation-options/hide-header.md
     - name: Hide Close Button
-      href: ../customisation-options/hide-close-button.md
+      href: ../customisation-options/hide-close-button.md
+    - name: Animation
+      href: ../customisation-options/animation.md

docs/src/usage/toc.yml

@@ -27,4 +27,6 @@
     - name: Hide Header
       href: ../customisation-options/hide-header.md
     - name: Hide Close Button
-      href: ../customisation-options/hide-close-button.md
+      href: ../customisation-options/hide-close-button.md
+    - name: Animation
+      href: ../customisation-options/animation.md

samples/BlazorServer/Pages/Animation.razor

@@ -0,0 +1,73 @@
+@page "/animation"
+@inject IModalService Modal
+
+<h1>Animating the modal</h1>
+
+<hr class="mb-5" />
+
+<p>
+    By default, the modal is shown without animation. The modal can be set to no animation, Fade in, Fade out or both.
+</p>
+
+<div class="card mb-4">
+    <h5 class="card-header">Setting on a per modal basis</h5>
+    <div class="card-body">
+        <p class="card-text">
+            <code>
+                @("var options = new ModalOptions() { Animation = ModalAnimation.FadeIn(2) };")
+                <br />
+                @("Modal.Show<Confirm>(\"Animation: Fade-In\", options);")
+            </code>
+        </p>
+    </div>
+</div>
+
+<div class="card mb-4">
+    <h5 class="card-header">Setting globally for all modals</h5>
+    <div class="card-body">
+        <p class="card-text">
+            <code>
+                @("<BlazoredModal Animation=\"@ModalAnimation.FadeIn(2)\"/> ")
+            </code>
+        </p>
+    </div>
+</div>
+
+<input type="number" @bind-value="@duration" />
+
+<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeIn(duration)))" class="btn btn-secondary">Fade-In</button>
+<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeOut(duration)))" class="btn btn-secondary">Fade-Out</button>
+<button @onclick="AnimationDefault" class="btn btn-primary">Globally set value (default no animation)</button>
+<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeInOut(duration)))" class="btn btn-secondary">Fade-in Fade-Out</button>
+
+<p>
+    It is also possible to have multiple modals (like in the Multiple Modals example) with different animations. With the below modal, the first modal will only fade-in with a duration of 2 seconds. The second modal will fade-in and fade-out in 5.0 seconds.
+</p>
+
+<button @onclick="@MultipleModals" class="btn btn-primary">Multiple Modals</button>
+
+@code {
+    private double duration = 1.0;
+
+    void AnimationDefault()
+    {
+        Modal.Show<Confirm>("Default Animation");
+    }
+
+    void AnimationCustom(ModalAnimation animation)
+    {
+        var options = new ModalOptions { Animation = animation };
+
+        Modal.Show<Confirm>($"Animation: {animation.Type}", options);
+    }
+
+    void MultipleModals()
+    {
+        var options = new ModalOptions
+        {
+            Animation = ModalAnimation.FadeIn(2)
+        };
+
+        Modal.Show<YesNoPromptAnimation>("Multiple Modals", options);
+    }
+}

samples/BlazorServer/Shared/NavMenu.razor

@@ -35,6 +35,9 @@
             <NavLink class="nav-link" href="/longrunningtask" Match="NavLinkMatch.All">
                 <span class="oi oi-loop-circular" aria-hidden="true"></span> Long running task
             </NavLink>
+            <NavLink class="nav-link" href="/animation" Match="NavLinkMatch.All">
+                <span class="oi oi-aperture" aria-hidden="true"></span> Animation
+            </NavLink>
         </li>
     </ul>
 </div>

samples/BlazorServer/Shared/YesNoPromptAnimation.razor

@@ -0,0 +1,29 @@
+@inject IModalService ModalService
+
+<div>
+    <p>Are you sure you want to delete the record?</p>
+
+    <button @onclick="Yes" class="btn btn-outline-danger">Yes</button>
+    <button @onclick="No" class="btn btn-primary">No</button>
+</div>
+
+@code {
+
+    [CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; }
+
+    async Task Yes()
+    {
+        var options = new ModalOptions { Animation = new ModalAnimation(ModalAnimationType.FadeInOut, 5) };
+
+        var confirmationModal = ModalService.Show<Confirm>("Second Modal", options);
+        var result = await confirmationModal.Result;
+
+        if (result.Cancelled)
+            return;
+
+        BlazoredModal.Close();
+    }
+
+    void No() => BlazoredModal.Cancel();
+
+}

samples/BlazorWebAssembly/Pages/Animation.razor

@@ -0,0 +1,73 @@
+@page "/animation"
+@inject IModalService Modal
+
+<h1>Animating the modal</h1>
+
+<hr class="mb-5" />
+
+<p>
+    By default, the modal is shown without animation. The modal can be set to no animation, Fade in, Fade out or both.
+</p>
+
+<div class="card mb-4">
+    <h5 class="card-header">Setting on a per modal basis</h5>
+    <div class="card-body">
+        <p class="card-text">
+            <code>
+                @("var options = new ModalOptions() { Animation = ModalAnimation.FadeIn(2) };")
+                <br />
+                @("Modal.Show<Confirm>(\"Animation: Fade-In\", options);")
+            </code>
+        </p>
+    </div>
+</div>
+
+<div class="card mb-4">
+    <h5 class="card-header">Setting globally for all modals</h5>
+    <div class="card-body">
+        <p class="card-text">
+            <code>
+                @("<BlazoredModal Animation=\"@ModalAnimation.FadeIn(2)\"/> ")
+            </code>
+        </p>
+    </div>
+</div>
+
+<input type="number" @bind-value="@duration" />
+
+<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeIn(duration)))" class="btn btn-secondary">Fade-In</button>
+<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeOut(duration)))" class="btn btn-secondary">Fade-Out</button>
+<button @onclick="AnimationDefault" class="btn btn-primary">Globally set value (default no animation)</button>
+<button @onclick="@(() => AnimationCustom(ModalAnimation.FadeInOut(duration)))" class="btn btn-secondary">Fade-in Fade-Out</button>
+
+<p>
+    It is also possible to have multiple modals (like in the Multiple Modals example) with different animations. With the below modal, the first modal will only fade-in with a duration of 2 seconds. The second modal will fade-in and fade-out in 5.0 seconds.
+</p>
+
+<button @onclick="@MultipleModals" class="btn btn-primary">Multiple Modals</button>
+
+@code {
+    private double duration = 1.0;
+
+    void AnimationDefault()
+    {
+        Modal.Show<Confirm>("Default Animation");
+    }
+
+    void AnimationCustom(ModalAnimation animation)
+    {
+        var options = new ModalOptions { Animation = animation };
+
+        Modal.Show<Confirm>($"Animation: {animation.Type}", options);
+    }
+
+    void MultipleModals()
+    {
+        var options = new ModalOptions
+        {
+            Animation = ModalAnimation.FadeIn(2)
+        };
+
+        Modal.Show<YesNoPromptAnimation>("Multiple Modals", options);
+    }
+}

samples/BlazorWebAssembly/Shared/NavMenu.razor

@@ -35,6 +35,9 @@
             <NavLink class="nav-link" href="/longrunningtask" Match="NavLinkMatch.All">
                 <span class="oi oi-loop-circular" aria-hidden="true"></span> Long running task
             </NavLink>
+            <NavLink class="nav-link" href="/animation" Match="NavLinkMatch.All">
+                <span class="oi oi-aperture" aria-hidden="true"></span> Animation
+            </NavLink>
         </li>
     </ul>
 </div>

samples/BlazorWebAssembly/Shared/YesNoPromptAnimation.razor

@@ -0,0 +1,29 @@
+@inject IModalService ModalService
+
+<div>
+    <p>Are you sure you want to delete the record?</p>
+
+    <button @onclick="Yes" class="btn btn-outline-danger">Yes</button>
+    <button @onclick="No" class="btn btn-primary">No</button>
+</div>
+
+@code {
+
+    [CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; }
+
+    async Task Yes()
+    {
+        var options = new ModalOptions { Animation = new ModalAnimation(ModalAnimationType.FadeInOut, 5) };
+
+        var confirmationModal = ModalService.Show<Confirm>("Second Modal", options);
+        var result = await confirmationModal.Result;
+
+        if (result.Cancelled)
+            return;
+
+        BlazoredModal.Close();
+    }
+
+    void No() => BlazoredModal.Cancel();
+
+}

src/Blazored.Modal/BlazoredModal.razor.cs

@@ -20,6 +20,7 @@ public partial class BlazoredModal
         [Parameter] public bool? DisableBackgroundCancel { get; set; }
         [Parameter] public ModalPosition? Position { get; set; }
         [Parameter] public string Class { get; set; }
+        [Parameter] public ModalAnimation Animation { get; set; }
 
         private readonly Collection<ModalReference> Modals = new Collection<ModalReference>();
         private readonly ModalOptions GlobalModalOptions = new ModalOptions();
@@ -35,6 +36,7 @@ protected override void OnInitialized()
             GlobalModalOptions.HideCloseButton = HideCloseButton;
             GlobalModalOptions.HideHeader = HideHeader;
             GlobalModalOptions.Position = Position;
+            GlobalModalOptions.Animation = Animation;
         }
 
         internal async void CloseInstance(ModalReference modal, ModalResult result)