Update way animation is added to the MessageBar and update relevant t…

…ests

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -6468,6 +6468,12 @@
             Default is true.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentMessageBar.FadeIn">
+            <summary>
+            Gets or sets the fade in animation for the MessageBar.
+            Default is true.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentMessageBar.Link">
             <summary>
             A link can be shown after the message. 

src/Core/Components/MessageBar/FluentMessageBar.razor

@@ -6,7 +6,7 @@
 
     @if (Type == MessageType.MessageBar)
     {
-        <div id="@Id" class="@ClassValue" style="@StyleValue" @onfocusin="@PauseTimeout" @onfocusout="@ResumeTimeout">
+        <div id="@Id" class="@ClassValue" style="@StyleValue" animation="@(FadeIn ? "fadein" : null)" @onfocusin="@PauseTimeout" @onfocusout="@ResumeTimeout">
 
             @* Icon *@
             <div class="fluent-messagebar-icon">

src/Core/Components/MessageBar/FluentMessageBar.razor.cs

@@ -19,7 +19,6 @@ public partial class FluentMessageBar : FluentComponentBase, IDisposable
     /// <summary />
     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)

src/Core/Components/MessageBar/FluentMessageBar.razor.css

@@ -15,7 +15,7 @@
     column-gap: 8px;
 }
 
-.fluent-messagebar-animation {
+.fluent-messagebar[animation="fadein"] {
     animation: fadein 1.5s;
 }
 

tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html

@@ -1,5 +1,5 @@
 
-<div class="fluent-messagebar fluent-messagebar-animation intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
+<div class="fluent-messagebar intent-info" animation="fadein" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
   <div class="fluent-messagebar-icon" b-ig2qs97tvl="">
     <svg style="width: 20px; fill: var(--info);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="3">
       <title>info</title>

tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html

@@ -1,5 +1,5 @@
 
-<div class="fluent-messagebar fluent-messagebar-animation intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-5ykbiib3u4="">
+<div class="fluent-messagebar intent-info" animation="fadein" blazor:onfocusin="1" blazor:onfocusout="2" b-5ykbiib3u4="">
   <div class="fluent-messagebar-icon" b-5ykbiib3u4="">
     <svg style="width: 20px; fill: var(--info);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="3">
       <title>info</title>

tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html

@@ -1,4 +1,4 @@
-<div id="uniqueId" class="fluent-messagebar fluent-messagebar-animation intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
+<div id="uniqueId" class="fluent-messagebar intent-info" animation="fadein" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
   <div class="fluent-messagebar-icon" b-ig2qs97tvl="">
     <svg style="width: 20px; fill: var(--info);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="3" blazor:onclick="4">
       <title>info</title>

tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync1.verified.razor.html

@@ -1,6 +1,6 @@
 
 <div class="fluent-messagebar-provider " b-aw4knpwcro="">
-    <div class="fluent-messagebar fluent-messagebar-animation intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
+    <div class="fluent-messagebar intent-info" animation="fadein" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
         <div class="fluent-messagebar-icon" b-ig2qs97tvl="">
             <svg style="width: 20px; fill: var(--info);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="3">
                 <title>info</title>

tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync2.verified.razor.html

@@ -1,6 +1,6 @@
 
 <div class="fluent-messagebar-provider " b-aw4knpwcro="">
-  <div class="fluent-messagebar fluent-messagebar-animation intent-warning" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
+  <div class="fluent-messagebar intent-warning" animation="fadein" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
     <div class="fluent-messagebar-icon" b-ig2qs97tvl="">
       <svg style="width: 20px; fill: var(--warning);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="3">
         <title>warning</title>

tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync3.verified.razor.html

@@ -1,6 +1,6 @@
 
 <div class="fluent-messagebar-provider " b-aw4knpwcro="">
-  <div class="fluent-messagebar fluent-messagebar-animation intent-warning" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
+  <div class="fluent-messagebar intent-warning" animation="fadein" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
     <div class="fluent-messagebar-icon" b-ig2qs97tvl="">
       <svg style="width: 20px; fill: var(--warning);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="3">
         <title>warning</title>