UI Toolkit: Transitions#

If you are having transitions occur instantaneously, consider the following things:

  1. Increase the transition's duration to a reasonable amount of time to check that it is actually working.
    It's extremely important to note whether your transition is occuring in ms (milliseconds) or s (seconds).
  2. Add the transition to a style that is present during the entire duration of your transition.
    If a style is removed as its specified transition is occuring, it will be cancelled.
  3. If an element is never evaluated in a state, that state will never form a point in the transition.
    For example, creating an element (or enabling a document) and adding a USS class in a single frame will not perform a transition. Consider adding the class after a delay.
  4. The target property must be marked as fully animatable.

Creating delays#

You can use a VisualElement's schedule property to retrieve its IVisualElementScheduler, which can execute actions later.

// Adds a class to an element on the next repaint.
element.schedule.Execute(() => element.AddToClassList(exampleUssClassName));

You can chain further calls to the Execute function to add more specific scheduling.

// Example that executes something after 200ms.

If you find an unlisted resolution please report an issue with this page so this page can be improved.