Transitions Fail When Animate UIElement

Unity Engine
,
1

When you move or scale a UIElement, a transition attached to it will not work.:hover / :active

Also, it will take control of the element on the first frame. For example, I hide a UIElement that is at the top of the screen by settings its position to negative its height. However, with a :hover / :active transition set on the element, it will force the element too reset back to its original position for a frame then go back to the position I set.

Here is a case where you can toggle between two instances where one allows the transition to work (not moving the UIElement) and the other (moving the UIElement).

Case #: 1345152

Thanks!

2

Bump

3

Hi MousePods,

I took a look at case 1345152 and your project.

When you move an element with “element.transform.position = new Vector2(x, y)” it is equivalent to “element.style.translate = new Translate(x, y, 0)”. This then makes the translate style inline. Inline style take precedence over USS, so when the :hover selector is triggered the “translate” property defined in USS will not be applied and no transition will occur.

In your case “LoadedSceneRevealAnimation” sets “settingsMenuToButton.transform.position” which override the style coming from USS and will prevent the transition to happen. When “Remove Glitch” is set to true on “Main Menu Manager LOOK HERE” it skips “LoadedSceneRevealAnimation” and then the transition works on hover.

I saw that you also use the experimental animation API. It’s important to keep in mind that this API sets inline style as well and will take over transitions defined in USS.

4

Thank you for looking into this!

I personally never would have figured out that the animation API or setting the position using transform.position was setting inline styles.

For anyone reading this, the solution is to simply set the translate style to null:

element.style.translate = new StyleTranslate(StyleKeyword.Null);

However, the issue where the button appears for one frame then disappears still happens. Should I report this as another bug?

On IEnumerator Start() at the end of the frame, I have the code to hide the button. (The entire menu has opacity to 0 so nothing should be visible).

settingsMenuToButton.transform.position = new Vector2(0, -(settingsMenuToButton.resolvedStyle.height + halfGamepadIconWidth));

Then I set the entire menu to opacity of 1.

shopLevelCollectableUIDocument.rootVisualElement.style.opacity = 1;

However, the only button that shows for a frame is the settings button.

If I remove this from the uss file, this doesn’t happen

.button-hover-slide-down-animation {
    transition-duration: var(--button-hover-animation-duration);
    transition-property: translate;
    transition-timing-function: var(--button-hover-animation-timing);
}

What is weird is that even removing the :hover and :active styles of the uss BUT keeping the above code active, the “bug” still happens.

.button-hover-slide-down-animation:hover:enabled {
    translate: 0 var(--button-hover-slide-distance-positive);
}

.button-hover-slide-down-animation:active:enabled {
    translate: 0 var(--button-hover-slide-distance-positive);
}

It seems like the transition-property: translate; is somehow resetting the element back to 0 position for a frame?

Thanks!

5

I wasn’t able to notice this issue but that might be on me because I’m not sure where to look. Everything look fine to me…

From what you’re describing it may be an issue with transition in USS or it could be something else. A simpler example reproducing the issue could help understanding.

Side note you can assign StyleKeyword.Null directly like this : element.style.translate = StyleKeyword.Null;

6

I was able to make a new project on the latest beta and upload it with the issue!

Case #: 1350951

Sweet, thanks for the tidbit!

1 Like
7

Hello, I’m trying to set up an animation transition to translate an element. Specifically, I want to translate this element by 50% in the “Y” direction. I have set the transition duration to 2 seconds. However, I am encountering a problem where the transition occurs instantaneously. Interestingly, when I change the translate value to “px” instead of “%”, the transition behaves as expected. Currently, I am implementing these transitions by adding and removing a style class that contains the translation. I am wondering if this behavior is intended. I am using Unity 2021.3.20f1.

8

The css specification does not mandate being able to do a transition from different kinds of units because the results are sometimes not what you would expect. In these case, yes, the transition is instantaneous. I think we did implement “cross unit transition” for rotation, and later for length when the beginning or end value is 0, as 0 px = 0%.