From 41178bc920cea8075c8b552c16270c404c4f3a98 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Mon, 26 Feb 2024 01:25:30 +0800
Subject: [PATCH] feat: fix active animation issue.

---
 demo/Ursa.Demo/Pages/SkeletonDemo.axaml      |  6 ++--
 src/Ursa.Themes.Semi/Controls/Skeleton.axaml | 30 +++++---------------
 src/Ursa.Themes.Semi/Styles/Skeleton.axaml   | 28 ++++++++++++++++++
 src/Ursa.Themes.Semi/Styles/_index.axaml     |  1 +
 4 files changed, 39 insertions(+), 26 deletions(-)
 create mode 100644 src/Ursa.Themes.Semi/Styles/Skeleton.axaml

diff --git a/demo/Ursa.Demo/Pages/SkeletonDemo.axaml b/demo/Ursa.Demo/Pages/SkeletonDemo.axaml
index 13198c0..3699bdf 100644
--- a/demo/Ursa.Demo/Pages/SkeletonDemo.axaml
+++ b/demo/Ursa.Demo/Pages/SkeletonDemo.axaml
@@ -39,7 +39,7 @@
                     CornerRadius="2"
                     IsActive="{Binding #active.IsChecked}"
                     Loading="{Binding #loading.IsChecked}">
-                    <TextBlock Margin="0,2" Text="是先有鸡还是先有蛋" />
+                    <SelectableTextBlock Margin="0,2" Text="是先有鸡还是先有蛋" />
                 </u:Skeleton>
                 <u:Skeleton
                     Margin="0,0,100,0"
@@ -47,14 +47,14 @@
                     CornerRadius="2"
                     IsActive="{Binding #active.IsChecked}"
                     Loading="{Binding #loading.IsChecked}">
-                    <TextBlock Margin="0,2" Text="什么是工匠精神" />
+                    <SelectableTextBlock Margin="0,2" Text="什么是工匠精神" />
                 </u:Skeleton>
                 <u:Skeleton
                     VerticalAlignment="Bottom"
                     CornerRadius="2"
                     IsActive="{Binding #active.IsChecked}"
                     Loading="{Binding #loading.IsChecked}">
-                    <TextBlock Margin="0,2" Text="看山不是山，看水不是水，看山还是山，看水还是水" />
+                    <SelectableTextBlock Margin="0,2" Text="看山不是山，看水不是水，看山还是山，看水还是水" />
                 </u:Skeleton>
             </UniformGrid>
         </Grid>
diff --git a/src/Ursa.Themes.Semi/Controls/Skeleton.axaml b/src/Ursa.Themes.Semi/Controls/Skeleton.axaml
index c7fe93b..a60ee83 100644
--- a/src/Ursa.Themes.Semi/Controls/Skeleton.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Skeleton.axaml
@@ -25,33 +25,17 @@
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}" />
                         <Border
-                            x:Name="PART_Border"
+                            x:Name="PART_LoadingBorder"
                             Classes.Active="{Binding Path= IsActive, RelativeSource={RelativeSource TemplatedParent}}"
                             IsHitTestVisible="{TemplateBinding Loading}"
+                            Background="{DynamicResource SkeletonDefaultBackground}"
+                            IsVisible="{TemplateBinding Loading}">
+                        </Border>
+                        <Border
+                            x:Name="PART_ActiveBorder"
+                            IsHitTestVisible="{TemplateBinding Loading}"
                             IsVisible="{TemplateBinding Loading}"
                             >
-                            <Border.Styles>
-                                <Style Selector="Border">
-                                    <Setter Property="Background" Value="{DynamicResource SkeletonDefaultBackground}"></Setter>
-                                </Style>
-                                <Style Selector="Border.Active">
-                                    <Style.Animations>
-                                        <Animation
-                                            FillMode="None"
-                                            IterationCount="Infinite"
-                                            Easing="CubicEaseInOut"
-                                            PlaybackDirection="Alternate"
-                                            Duration="0:0:1.4">
-                                            <KeyFrame Cue="0%">
-                                                <Setter Property="Border.Background" Value="{DynamicResource SkeletonStartAnimationBackground}" />
-                                            </KeyFrame>
-                                            <KeyFrame Cue="100%">
-                                                <Setter Property="Border.Background" Value="{DynamicResource SkeletonEndAnimationBackground}" />
-                                            </KeyFrame>
-                                        </Animation>
-                                    </Style.Animations>
-                                </Style>
-                            </Border.Styles>
                         </Border>
                     </Panel>
                 </Border>
diff --git a/src/Ursa.Themes.Semi/Styles/Skeleton.axaml b/src/Ursa.Themes.Semi/Styles/Skeleton.axaml
new file mode 100644
index 0000000..daedf0d
--- /dev/null
+++ b/src/Ursa.Themes.Semi/Styles/Skeleton.axaml
@@ -0,0 +1,28 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:u="https://irihi.tech/ursa">
+    <Design.PreviewWith>
+        <Border Padding="20">
+            <!-- Add Controls for Previewer Here -->
+        </Border>
+    </Design.PreviewWith>
+
+    <!-- Add Styles Here -->
+    <Style Selector="u|Skeleton[IsActive=True][Loading=True] /template/ Border#PART_ActiveBorder">
+        <Style.Animations>
+            <Animation
+                FillMode="None"
+                IterationCount="Infinite"
+                Easing="CubicEaseInOut"
+                PlaybackDirection="Alternate"
+                Duration="0:0:1.4">
+                <KeyFrame Cue="0%">
+                    <Setter Property="Border.Background" Value="{DynamicResource SkeletonStartAnimationBackground}" />
+                </KeyFrame>
+                <KeyFrame Cue="100%">
+                    <Setter Property="Border.Background" Value="{DynamicResource SkeletonEndAnimationBackground}" />
+                </KeyFrame>
+            </Animation>
+        </Style.Animations>
+    </Style>
+</Styles>
diff --git a/src/Ursa.Themes.Semi/Styles/_index.axaml b/src/Ursa.Themes.Semi/Styles/_index.axaml
index 8423f00..b0cd7c7 100644
--- a/src/Ursa.Themes.Semi/Styles/_index.axaml
+++ b/src/Ursa.Themes.Semi/Styles/_index.axaml
@@ -5,5 +5,6 @@
         </Border>
     </Design.PreviewWith>
     <StyleInclude Source="ButtonGroup.axaml" />
+    <StyleInclude Source="Skeleton.axaml" />
     <!--  Add Styles Here  -->
 </Styles>