Question Why does transition end callback occur multiple times?

I have this bit of code in my monobehaviour to load my ui:

Code (CSharp):

1.        
2.         void Load()
3.         {
4.             _panel.RegisterCallback<TransitionEndEvent>(OnComplete);
5.             _panel.style.display = DisplayStyle.Flex;
6.             _panel.RemoveFromClassList(_unloadClass);
7.             _panel.AddToClassList(_loadClass);
8.         }
9.  
10.         private void OnComplete(TransitionEndEvent evt)
11.         {
12.                if (IsOpen)
13.                 OnOpen?.Invoke();
14.             else
15.                 _panel.style.display = DisplayStyle.None;
16.         }

OnComplete gets called multiple times, but the panel only transitions once, it seems like other elements that are children that have transitions are also calling OnComplete but i never registered to those elements, i am confused by this and why it does this? Thats a lot of callbacks i don't want happening.

 

Are you ensuring it isn't being registered multiple times, and making sure to deregister appropriately too? In most cases where I've used this I've need to deregister in the callback method. Depends on the particular situation though.

 

When i was debugging, the callback event.target was also coming from child elements that had their own transitions.. not sure why i would receive them when i registered only to the transitions belonging the parent?

I had to add this to resolve the weird behaviour for now:

Code (CSharp):

1.         private void OnComplete(TransitionEndEvent evt)
2.         {
3.             //we only care about the completion of this element not the children's transitions
4.             if (evt.target != _panel)
5.                 return;
6.             ... etc
7.  

But i should not be receiving more than one callback, any ideas why i get the child transitions too ?

 

Hello,

On the documentation it says that it bubble up, so it's "normal" behaviour, you also receive the animation from your childs.

https://docs.unity3d.com/2022.1/Documentation/Manual/UIE-Transition-Events.html

Also, as you can see
If a shorthand USS property is changed, every component also gets its own lifecycle. For example, if you change margin, margin-left, margin-right, margin-top and margin-bottom, they all get their own TransitionRunEvent, TransitionStartEvent and TransitionEndEvent, for a total of 12 separate events.

Which could also explain why you had multiple events, if 2 properties where changed within your USS class, you'll receive 2 events, not one containing both changes from your animation.