UI Toolkit Trransitions

Unity Engine
,
1

Can someone show how we can create transitions like shown in this blogpost:
What’s new in UI Toolkit? | Unity Blog

8167253--1062662--upload_2022-5-30_19-32-9.png
8167253--1062662--upload_2022-5-30_19-32-9.png713×403 36.2 KB

What I can achieve right now is create transitions for a single element I hover/focus on but I have no idea about how to trigger transitions of child elements without hovering over them directly?

Also, is it possible to do something similar for Visual Elements that are not the child of the element that should trigger it?

2

Hi, the transition above was created with a complex selector that would match a child element when its parent is being hovered.

So something along the lines of:

/* Base selector sets the properties and indicates how they should be transitioned. */
.matches-the-children{
    transition: width 250ms;
    width: 200px;
}

/* When the parent is being hovered, change the width of the element, which will trigger the transition. */
.matches-the-parent:hover .matches-the-children{
    width 300px;
}

Hope this helps!

1 Like
3

Thanks a lot. :slight_smile:

I really think a lot more examples should be provided to get a sense of how all the features work in UI toolkit.
Especially about the Selectors types, it would avoid confusions like mine

4

I agree!
So far, we’ve focused on adding those examples and tips inside the UI Builder when possible (i.e. when adding a new selector, we will display a popup in the Viewport with some help), but perhaps we should include the uxml/uss files used in blog/forum posts.
Thanks for the feedback!

1 Like