@@ -10,8 +10,12 @@ namespace Unity.Samples.LetterSpell
1010 [ UxmlElement ]
1111 public partial class StackView : VisualElement
1212 {
13+ private VisualElement m_ContentContainer ;
1314 private VisualElement m_ActiveView ;
15+ private VisualElement m_TransitionElement ;
1416
17+ public override VisualElement contentContainer => m_ContentContainer ;
18+
1519 [ UxmlAttribute ]
1620 public int index
1721 {
@@ -29,10 +33,17 @@ public VisualElement activeView
2933 get => m_ActiveView ;
3034 set
3135 {
36+ var oldView = m_ActiveView ;
37+
3238 if ( m_ActiveView == value )
3339 return ;
3440 m_ActiveView = value ;
35- UpdateViews ( ) ;
41+
42+ if ( panel != null )
43+ StartTransition ( oldView , m_ActiveView ) ;
44+ else
45+ UpdateViews ( ) ;
46+
3647 activeViewChanged ? . Invoke ( ) ;
3748 }
3849 }
@@ -41,9 +52,54 @@ public VisualElement activeView
4152
4253 public StackView ( )
4354 {
55+ AddToClassList ( "lsp-stack-view" ) ;
56+
57+ m_ContentContainer = new VisualElement ( ) ;
58+ m_ContentContainer . AddToClassList ( "lsp-stack-view__content-container" ) ;
59+ m_ContentContainer . style . flexGrow = 1 ;
60+ hierarchy . Add ( m_ContentContainer ) ;
4461 RegisterCallback < GeometryChangedEvent > ( ( e ) => UpdateViews ( ) ) ;
4562 }
63+
64+ void StartTransition ( VisualElement from , VisualElement to )
65+ {
66+ if ( m_TransitionElement == null )
67+ {
68+ m_TransitionElement ??= new VisualElement ( ) ;
69+ m_TransitionElement . AddToClassList ( "lsp-stack-view-Transition" ) ;
70+ }
71+ m_TransitionElement . style . opacity = 0 ;
72+ hierarchy . Add ( m_TransitionElement ) ;
4673
74+ var fadeIn = m_TransitionElement . experimental . animation . Start (
75+ ( element ) => element . style . opacity . value ,
76+ 1f , 400 , ( element , value ) =>
77+ {
78+ element . style . opacity = value ;
79+ Debug . Log ( "op = " + value ) ;
80+ } ) ;
81+ fadeIn . onAnimationCompleted += ( ) =>
82+ {
83+ // Hide the old view
84+ if ( from != null )
85+ from . style . display = DisplayStyle . None ;
86+
87+ // Show the new view
88+ if ( to != null )
89+ {
90+ to . style . display = DisplayStyle . Flex ;
91+ }
92+
93+ var fadeOut = m_TransitionElement . experimental . animation . Start (
94+ ( element ) => element . style . opacity . value ,
95+ 0 , 400 , ( element , value ) => element . style . opacity = value ) ;
96+ fadeOut . onAnimationCompleted += ( ) =>
97+ {
98+ m_TransitionElement . RemoveFromHierarchy ( ) ;
99+ } ;
100+ } ;
101+ }
102+
47103 public void UpdateViews ( )
48104 {
49105 foreach ( var view in Children ( ) )
0 commit comments