More animations shenanigans.

src/Avalonia.Controls/LayoutTransformControl.cs

@@ -51,6 +51,7 @@ namespace Avalonia.Controls
         {
             if (TransformRoot == null || LayoutTransform == null)
             {
+                LayoutTransform = RenderTransform;
                 return base.ArrangeOverride(finalSize);
             }
 

src/Avalonia.Controls/Notifications/Notification.cs

@@ -9,11 +9,12 @@ namespace Avalonia.Controls.Notifications
 {
     public class Notification : ContentControl
     {
-        private TimeSpan _closingAnimationTime = TimeSpan.FromSeconds(1);
+        // private TimeSpan _closingAnimationTime = TimeSpan.FromSeconds(1);
 
         static Notification()
         {
             //CloseOnClickProperty.Changed.AddClassHandler<Button>(CloseOnClickChanged);
+            IsClosedProperty.Changed.AddClassHandler<Notification>(IsClosedChanged);
         }
 
         public Notification()
@@ -57,6 +58,20 @@ namespace Avalonia.Controls.Notifications
         public static readonly DirectProperty<Notification, bool> IsClosingProperty =
             AvaloniaProperty.RegisterDirect<Notification, bool>(nameof(IsClosing), o => o.IsClosing);
 
+        private bool _isClosed;
+
+        /// <summary>
+        /// Determines if the notification is closed.
+        /// </summary>
+        public bool IsClosed
+        {
+            get { return _isClosed; }
+            set { SetAndRaise(IsClosedProperty, ref _isClosed, value); }
+        }
+
+        public static readonly DirectProperty<Notification, bool> IsClosedProperty =
+            AvaloniaProperty.RegisterDirect<Notification, bool>(nameof(IsClosed), o => o.IsClosed, (o,v) => o.IsClosed = v );
+
         /// <summary>
         /// Defines the <see cref="NotificationCloseInvoked"/> event.
         /// </summary>
@@ -95,7 +110,7 @@ namespace Avalonia.Controls.Notifications
         }*/
 
         //public static readonly AvaloniaProperty CloseOnClickProperty =
-          //  AvaloniaProperty.RegisterDirect<Notification, bool>("CloseOnClick", GetCloseOnClick, SetCloseOnClick);
+        //  AvaloniaProperty.RegisterDirect<Notification, bool>("CloseOnClick", GetCloseOnClick, SetCloseOnClick);
 
         private static void CloseOnClickChanged(Button dependencyObject, AvaloniaPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
         {
@@ -149,8 +164,17 @@ namespace Avalonia.Controls.Notifications
             IsClosing = true;
 
             RaiseEvent(new RoutedEventArgs(NotificationCloseInvokedEvent));
-            await Task.Delay(_closingAnimationTime);
+        }
-            RaiseEvent(new RoutedEventArgs(NotificationClosedEvent));
+
+
+        private static void IsClosedChanged(Notification target, AvaloniaPropertyChangedEventArgs arg2)
+        {
+            if (!target.IsClosing & !target.IsClosed)
+            {
+                return;
+            }
+
+            target.RaiseEvent(new RoutedEventArgs(NotificationClosedEvent));
         }
     }
 }

src/Avalonia.Themes.Default/NotificationArea.xaml

@@ -13,14 +13,15 @@
         <Setter Property="Width" Value="350"/>
         <Setter Property="FontSize" Value="14"/>
         <Setter Property="Foreground" Value="White"/>
-
+        <Setter Property="RenderTransformOrigin" Value="50%,75%"/>
+        <Setter Property="Height" Value="100"/>
         <!-- <Setter Property="ContentTemplateSelector" Value="{StaticResource NotificationTemplateSelector}"/> -->
         <Setter Property="Template">
             <ControlTemplate>
-                <Border Background="{TemplateBinding Background}"
+                <Border Background="{TemplateBinding Background}" 
-                BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderBrush="{TemplateBinding BorderBrush}" 
-                BorderThickness="{TemplateBinding BorderThickness}"
+                        BorderThickness="{TemplateBinding BorderThickness}" 
-                Margin="8,8,0,0">
+                        Margin="8,8,0,0">
                     <Grid>
                         <ContentPresenter Content="{TemplateBinding Content}" />
                         <Button Name="PART_CloseButton" Margin="12" Foreground="{TemplateBinding Foreground}" Opacity="0.8"/>
@@ -30,16 +31,16 @@
         </Setter>
 
         <Style.Animations>
-            <Animation Duration="0:0:1.0" Easing="CubicEaseInOut" FillMode="Forward">
+            <Animation Duration="0:0:0.25" Easing="QuadraticEaseIn" FillMode="Forward">
                 <KeyFrame Cue="0%">
                     <Setter Property="Opacity" Value="0"/>
-                    <Setter Property="TranslateTransform.X" Value="250"/>
+                    <Setter Property="ScaleTransform.ScaleX" Value="0.75"/>
-                    <Setter Property="Height" Value="0"/>
+                    <Setter Property="ScaleTransform.ScaleY" Value="0.75"/>
                 </KeyFrame>
                 <KeyFrame Cue="100%">
                     <Setter Property="Opacity" Value="1"/>
-                    <Setter Property="TranslateTransform.X" Value="0"/>
+                    <Setter Property="ScaleTransform.ScaleX" Value="1"/>
-                    <Setter Property="Height" Value="100"/>
+                    <Setter Property="ScaleTransform.ScaleY" Value="1"/>
                 </KeyFrame>
             </Animation>
         </Style.Animations>
@@ -47,16 +48,23 @@
 
     <Style Selector="Notification[IsClosing=true]">
         <Style.Animations>
-            <Animation Duration="0:0:1.0" Easing="CubicEaseInOut" FillMode="Forward">
+            <Animation Duration="0:0:0.2" Easing="QuadraticEaseOut" FillMode="Forward">
                 <KeyFrame Cue="0%">
-                    <Setter Property="Height" Value="100"/>
                     <Setter Property="Opacity" Value="1"/>
                     <Setter Property="TranslateTransform.X" Value="0"/>
                 </KeyFrame>
+                <KeyFrame Cue="50%">
+                    <Setter Property="Opacity" Value="0"/>
+                    <Setter Property="TranslateTransform.X" Value="250"/>
+                </KeyFrame>
+                <KeyFrame Cue="60%">
+                    <Setter Property="Height" Value="100"/>
+                </KeyFrame>
                 <KeyFrame Cue="100%">
-                    <Setter Property="Height" Value="0"/>
+                    <Setter Property="IsClosed" Value="True"/>
                     <Setter Property="Opacity" Value="0"/>
                     <Setter Property="TranslateTransform.X" Value="250"/>
+                    <Setter Property="Height" Value="0"/>
                 </KeyFrame>
             </Animation>
         </Style.Animations>