add nice animations with animated stacking.

src/Avalonia.Controls/Notifications/Notification.cs

@@ -9,7 +9,7 @@ namespace Avalonia.Controls.Notifications
 {
     public class Notification : ContentControl
     {
-        private TimeSpan _closingAnimationTime = TimeSpan.FromSeconds(0.25);
+        private TimeSpan _closingAnimationTime = TimeSpan.FromSeconds(1);
 
         static Notification()
         {

src/Avalonia.Themes.Default/NotificationArea.xaml

@@ -13,8 +13,8 @@
         <Setter Property="Width" Value="350"/>
         <Setter Property="FontSize" Value="14"/>
         <Setter Property="Foreground" Value="White"/>
-        
-       <!-- <Setter Property="ContentTemplateSelector" Value="{StaticResource NotificationTemplateSelector}"/> -->
+
+        <!-- <Setter Property="ContentTemplateSelector" Value="{StaticResource NotificationTemplateSelector}"/> -->
         <Setter Property="Template">
             <ControlTemplate>
                 <Border Background="{TemplateBinding Background}"
@@ -30,31 +30,35 @@
         </Setter>
 
         <Style.Animations>
-          <Animation Duration="0:0:0.200" Easing="CubicEaseInOut">
-            <KeyFrame Cue="0%">
-              <Setter Property="Opacity" Value="0"/>
-              <Setter Property="TranslateTransform.X" Value="250"/>
-            </KeyFrame>
-            <KeyFrame Cue="100%">
-              <Setter Property="Opacity" Value="1"/>
-              <Setter Property="TranslateTransform.X" Value="0"/>
-            </KeyFrame>
-          </Animation>
+            <Animation Duration="0:0:1.0" Easing="CubicEaseInOut" FillMode="Forward">
+                <KeyFrame Cue="0%">
+                    <Setter Property="Opacity" Value="0"/>
+                    <Setter Property="TranslateTransform.X" Value="250"/>
+                    <Setter Property="Height" Value="0"/>
+                </KeyFrame>
+                <KeyFrame Cue="100%">
+                    <Setter Property="Opacity" Value="1"/>
+                    <Setter Property="TranslateTransform.X" Value="0"/>
+                    <Setter Property="Height" Value="100"/>
+                </KeyFrame>
+            </Animation>
         </Style.Animations>
     </Style>
 
     <Style Selector="Notification[IsClosing=true]">
         <Style.Animations>
-          <Animation Duration="0:0:0.150" Easing="CubicEaseInOut" FillMode="Forward">
-            <KeyFrame Cue="0%">             
-              <Setter Property="Opacity" Value="1"/>
-              <Setter Property="TranslateTransform.X" Value="0"/>
-            </KeyFrame>
-            <KeyFrame Cue="100%">
-              <Setter Property="Opacity" Value="0"/>
-              <Setter Property="TranslateTransform.X" Value="250"/>
-            </KeyFrame>
-          </Animation>
+            <Animation Duration="0:0:1.0" Easing="CubicEaseInOut" FillMode="Forward">
+                <KeyFrame Cue="0%">
+                    <Setter Property="Height" Value="100"/>
+                    <Setter Property="Opacity" Value="1"/>
+                    <Setter Property="TranslateTransform.X" Value="0"/>
+                </KeyFrame>
+                <KeyFrame Cue="100%">
+                    <Setter Property="Height" Value="0"/>
+                    <Setter Property="Opacity" Value="0"/>
+                    <Setter Property="TranslateTransform.X" Value="250"/>
+                </KeyFrame>
+            </Animation>
         </Style.Animations>
     </Style>