Search Unity

Question C# 2021.2.0a20 How To Use Transition Properties

Discussion in 'UI Toolkit' started by Nexer8, Jun 9, 2021.

  1. Nexer8

    Nexer8

    Joined:
    Dec 10, 2017
    Posts:
    271
    In Unity 2021.2.0a20 transition properties were added, but how are you supposed to use them?
    transitionDelay, transitionDuration and transitionTimingFunctions all make sense, but transitionProperty seems different.

    From what I can see, it looks to be a list of property names, but how it is supposed to be used is a mystery.
     
    Nexer8, Jun 9, 2021
    #1
    Kirsche likes this.

  2. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    698
    JuliaP_Unity, Jun 9, 2021
    #2
    Kirsche and Onigiri like this.

  3. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    698
    You can also use the UI Builder to set all the values for transitions and the USS will be generated correctly for you :cool:
     
    JuliaP_Unity, Jun 9, 2021
    #3
    Kirsche and Onigiri like this.

  4. Onigiri

    Onigiri

    Joined:
    Aug 10, 2014
    Posts:
    482
    Wow, transform properties in a19 and transitions in a20, you guys are fast! Downloading immediately
     
    Onigiri, Jun 9, 2021
    #4
    Kirsche likes this.

  5. SimonDufour

    SimonDufour

    Unity Technologies

    Joined:
    Jun 30, 2020
    Posts:
    572
    Yes. You can select the one that you want to animate. There is also the "all" special value if you want to simplify the prototyping.

    I recommend that you only set the one you are using when the prototyping is over, as, in the future, we may activate automatically some optimization based on that list to make the transition smoother. These optimizations may include some overhead if you are not actually using the transition.
     
    SimonDufour, Jun 9, 2021
    #5
    Orimay and Kirsche like this.

  6. Nexer8

    Nexer8

    Joined:
    Dec 10, 2017
    Posts:
    271
    I'll take a look at it. Only question I have now is how do I trigger a transition?
     
    Nexer8, Jun 10, 2021
    #6

  7. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    479
    Transitions are triggered automatically when a style value changes, similarly to css transitions. This can happen when adding/removing classes, when a pseudo class is added/removed (i.e. hover, focus, etc.) and when changing the inline styles of an element.
     
    martinpa_unity, Jun 10, 2021
    #7
    Orimay, Kirsche and Nexer8 like this.

  8. Kirsche

    Kirsche

    Joined:
    Apr 14, 2015
    Posts:
    121
    Wow, powerful and simple. It's great!

    UI Toolkit is my favorite UI framework already. You guys took inspirations from the right places and integrated it beautifully with C#. Nothing but respect for the team behind this! :)
     
    Kirsche, Jun 11, 2021
    #8
    Tom42_59, craftsmanbeck, frarf and 5 others like this.

  9. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,941
    How can we stay up to date with UIToolkit new features ? as UIToolkit and Builder post in this forum seems not to be updated anymore
     
    jGate99, Jun 11, 2021
    #9

  10. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    479
    They are both part of Unity now. UI Builder was added during 21.1 and UI Toolkit for runtime was added for 21.2. New features that can be previewed by downloading the latest alpha/beta.
     
    martinpa_unity, Jun 11, 2021
    #10
    jGate99 likes this.

  11. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,941
    time to read release notes from now on :D
     
    jGate99, Jun 12, 2021
    #11

  12. MousePods

    MousePods

    Joined:
    Jul 19, 2012
    Posts:
    811
    Hey, quick question!

    I am using experimental.animation.start to animate scale. However, it seems transitions are the way to do it now!

    For the bit I am working with, I need to scale a VE non-uniformly. I didn’t want to create a class in uss and add/remove it to transition it.

    Is there a way to animate via transitions through code? I couldn’t find any examples.

    Thanks!
     
    MousePods, Jun 22, 2021
    #12

  13. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    698
    All the USS properties you can set through the USS file can be set through C# code through 
    VisualElement.style
    - hope that helps!
     
    JuliaP_Unity, Jun 22, 2021
    #13

  14. MousePods

    MousePods

    Joined:
    Jul 19, 2012
    Posts:
    811
    Thanks for the info! I tried this earlier, but I don't know what I am missing. That is why I was looking for an example. :(

    I got this far.
    Code (CSharp):
    1.         levelName.style.transitionProperty = new StyleList<StylePropertyName>()
    2.         {
    3.             new StylePropertyName("test")
    4.         };
    This obviously is wrong as it gives an error. However, I am not the best at coding without an example and cannot figure out where to go from here. Is there any examples or documentation coming soon with coded examples that gives an entire example of a transition with all the properties?

    Sorry :(

    Thanks!
     
    MousePods, Jun 22, 2021
    #14

  15. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    479
    Hey @MousePods, for the transition property, you need to give it a valid uss property (such as "background-color"). To get a transition, you will also need to set the transitionDuration (by default, it is 0s) and have a style property that changes. For example:
    Code (CSharp):
    1. element.style.height = 200;
    2. element.style.transitionProperty = new List<StylePropertyName>
    3. {
    4.     new StylePropertyName("height")
    5. };
    6.  
    7. element.style.transitionDuration = new List<TimeValue>()
    8. {
    9.     new TimeValue(250, TimeUnit.Millisecond)
    10. };
    11.  
    12. // Some time later
    13. element.style.height = 500;
     
    martinpa_unity, Jun 22, 2021
    #15
    Orimay and MousePods like this.

  16. MousePods

    MousePods

    Joined:
    Jul 19, 2012
    Posts:
    811
    Thanks! I see where my error was.

    Thanks for all the hard work! Love the new system :)
     
    MousePods, Jun 23, 2021
    #16
    martinpa_unity likes this.

  17. Midiphony-panda

    Midiphony-panda

    Joined:
    Feb 10, 2020
    Posts:
    243
    Is there something in the API to be notified when a transition ends (and/or starts) ?
     
    Midiphony-panda, Jul 12, 2021
    #17

  18. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    698
    Yes! It's the same event system for other UI Toolkit events, so the events you need to know are the following:
    - TransitionRunEvent - when a transition is created (i.e. added to the set of running transitions); if there's a delay, this will trigger before the delay phase starts.
    - TransitionStartEvent - when a transition actually starts, so if you have a delay it's sent when the delay phase ends.
    - TransitionEndEvent - when a transition ends.
    - TransitionCancelEvent - when a transition is canceled.
     
    JuliaP_Unity, Jul 12, 2021
    #18
    shanecelis, ProFiLeR4100, craftsmanbeck and 2 others like this.

  19. Midiphony-panda

    Midiphony-panda

    Joined:
    Feb 10, 2020
    Posts:
    243
    Nice ! :)
    I'll try to hook on them when I have time
     
    Midiphony-panda, Jul 12, 2021
    #19

  20. Xelnath

    Xelnath

    Joined:
    Jan 31, 2015
    Posts:
    402
    Does anyone have more step-by-step examples of how to use this?
     
    Xelnath, Oct 17, 2022
    #20

  21. Xelnath

    Xelnath

    Joined:
    Jan 31, 2015
    Posts:
    402
    Xelnath, Oct 17, 2022
    #21

  22. Arkasis

    Arkasis

    Joined:
    Nov 22, 2010
    Posts:
    61
    Hello there !
    I'm having trubbles using css transitions.
    It is working fine when I changed the opacity value from the UIToolkit Debugger window.
    But when I'm using C# code like this :
    Code (CSharp):
    1.  
    2.         _parentGroup.style.opacity = 1f;
    3.  
    It is not playing the transition animation. It just immediatly change the value.
    Did I miss something ?

    Thanks
     
    Arkasis, Oct 12, 2023
    #22

  23. Tauntastic

    Tauntastic

    Joined:
    Sep 24, 2020
    Posts:
    17
    As far as I know, you need to wait for the end of frame. If you're using below 2023_1, use IEnumerator.
    Code (CSharp):
    1.         private async void Start()
    2.         {
    3.             var root = UIDocument.rootVisualElement;
    4.             var parentGroup = root.Q<VisualElement>("parent-group");
    5.      
    6.             await Awaitable.EndOfFrameAsync();
    7.      
    8.             parentGroup.style.opacity = 0;
    9.      
    10.         }
     
    Last edited: Oct 12, 2023
    Tauntastic, Oct 12, 2023
    #23

  24. Arkasis

    Arkasis

    Joined:
    Nov 22, 2010
    Posts:
    61
    It is working!
    Thanks a lot for your advice.
    Is it written somewhere in the documentation?
    If not it needs to be :)
     
    Arkasis, Oct 13, 2023
    #24

  25. uMathieu

    uMathieu

    Unity Technologies

    Joined:
    Jun 6, 2017
    Posts:
    398
    Css transitions will trigger when going from one value to another. Problem happens on the first frame where there a no "previous" values so values are not transitioned.
     
    uMathieu, Oct 13, 2023
    #25