How do I automatically trigger a transition at runtime?

I'm trying to animate a dialog box so it pops up from the bottom of the screen. I know about selectors like :hover but I want the transition to occur without any input from the player. How would I do this?

 

You can add a new class (like opened-dialog-box) when you want to show it. And make this dialog box's initial position at the bottom. And also don't forget to add transition properties in it's USS code (a simple "transition-duration: 0.5s;" is enough to animate it's property changes). And lastly, define openec-dialog-box's position where you want it to be in USS.

 

I may have misunderstood because it doesn't seem to work. It goes to where its supposed to be on screen but it happens instantly.

Here are my USS classes:

Code (CSharp):

1. .main-container-hidden {
2.     flex-grow: 1;
3.     align-items: flex-end;
4.     justify-content: center;
5.     flex-direction: row-reverse;
6.     padding-bottom: 10px;
7.     opacity: 0;
8.     transition-duration: 2s;
9.     left: -300px;
10. }
11.  
12. .main-container-revealed {
13.     left: 0px;
14.     opacity: 1;
15.     transition-duration: 2s;
16.     transition-property: all;
17. }

And the code I use to change the class:

Code (CSharp):

1. mainContainer.ToggleInClassList("main-container-revealed");

 

How would you go about Unregistering the callback afterward? Is there a way to unregister all callbacks? I am not sure where in code you would need to be to unregister, since you can't do it from within the callback itself.

 

Yes, if I do something like this:

Code (CSharp):

1.        EventCallback<GeometryChangedEvent> evt = (GeometryChangedEvent e) =>
2.         {
3.             // some code
4.             popup.UnregisterCallback(evt);
5.         };

evt says it is unassigned. Maybe I am going about this the wrong way?

Note: here, popup would be the VisualElement I register the callback to right after this.

 

This works, thank you!

 

Hello !

I tried your solution, it works the first time. But if I detatch my visual from the panel and then attatch it again then the geometry changed event is not trigger anymore.
Is there a way to force trigger this event ? To now when visuals are listening for transition ?