diff --git a/src/Core/Components/MessageBar/FluentMessageBar.razor.cs b/src/Core/Components/MessageBar/FluentMessageBar.razor.cs
index 820bdb01d2..81a8644639 100644
--- a/src/Core/Components/MessageBar/FluentMessageBar.razor.cs
+++ b/src/Core/Components/MessageBar/FluentMessageBar.razor.cs
@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;
@@ -15,6 +19,7 @@ public partial class FluentMessageBar : FluentComponentBase, IDisposable
///
protected string? ClassValue => new CssBuilder(Class)
.AddClass("fluent-messagebar", () => Type == MessageType.MessageBar)
+ .AddClass("fluent-messagebar-animation", () => FadeIn)
.AddClass("dark", () => GlobalState.Luminance == StandardLuminance.DarkMode)
.AddClass("fluent-messagebar-notification", () => Type == MessageType.Notification)
.AddClass("intent-info", () => Intent == MessageIntent.Info)
@@ -154,6 +159,13 @@ public DateTime? Timestamp
[Parameter]
public bool AllowDismiss { get; set; } = true;
+ ///
+ /// Gets or sets the fade in animation for the MessageBar.
+ /// Default is true.
+ ///
+ [Parameter]
+ public bool FadeIn { get; set; } = true;
+
/////
///// On app and page level a Message bar should NOT have rounded corners. On component level it should.
/////
diff --git a/src/Core/Components/MessageBar/FluentMessageBar.razor.css b/src/Core/Components/MessageBar/FluentMessageBar.razor.css
index f31fb6fdf7..f122900529 100644
--- a/src/Core/Components/MessageBar/FluentMessageBar.razor.css
+++ b/src/Core/Components/MessageBar/FluentMessageBar.razor.css
@@ -1,4 +1,4 @@
-/* OneRow */
+/* OneRow */
.fluent-messagebar {
font-family: var(--body-font);
@@ -13,6 +13,9 @@
border-radius: calc(var(--control-corner-radius) * 1px);
padding: 0 12px;
column-gap: 8px;
+}
+
+.fluent-messagebar-animation {
animation: fadein 1.5s;
}
@@ -121,7 +124,6 @@
min-height: 36px;
padding: 0 12px;
column-gap: 8px;
- animation: fadein 1.5s;
}
.fluent-messagebar-notification.intent-info {
diff --git a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html
index c6294c9177..7319077b63 100644
--- a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html
+++ b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html
@@ -1,5 +1,5 @@
-
+
-
\ No newline at end of file
+
diff --git a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html
index 2d9d64bca1..4f3696b344 100644
--- a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html
+++ b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html
@@ -1,5 +1,5 @@
-
+
\ No newline at end of file
+
diff --git a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_DisableFadeIn.verified.html b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_DisableFadeIn.verified.html
new file mode 100644
index 0000000000..768ec31594
--- /dev/null
+++ b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_DisableFadeIn.verified.html
@@ -0,0 +1,17 @@
+
+
+
+
+ This is a message
+
+
+
diff --git a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html
index 039a95af97..91b4e5eb1f 100644
--- a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html
+++ b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html
@@ -1,5 +1,4 @@
-
-
+