Question Transition not happening

Songerk · Apr 29, 2024

The transition doesn't happened, it just going straight to the value, how can I fix it?
I am changing the value with

Code (CSharp):

element.style.rotate = new StyleRotate(new Rotate(-rotation));

and even with the debug, it's all seems correct

mcoted3d · Apr 29, 2024

This should work. I would double-check that there isn't any conflict between multiple selectors having different transition values. If not, it might be worth filing a bug.

Songerk · Apr 29, 2024

mcoted3d said: ↑

This should work. I would double-check that there isn't any conflict between multiple selectors having different transition values. If not, it might be worth filing a bug.
Click to expand...

what do you mean by "conflict between multiple selectors having different transition values"?
do you mean different classes that have transitions of rotation on the element?
if so I check all of them and none of them effect the rotation.

mcoted3d · Apr 29, 2024

Songerk said: ↑

do you mean different classes that have transitions of rotation on the element?
Click to expand...

Yes, or classes that define the transition-duration to something else. It doesn't seem to be the case according to the UI Toolkit debugger screenshot, though.

It works on the latest Unity 6 beta, which version of Unity are you using?

cpalma-unity · Apr 29, 2024

Hello! Are you setting you rotation on Start? If so, you need to wait for the first GeometryChange event, something like this:

Code (CSharp):

bool firstGeometryChanged = true;

void Start()

{

var button = document.rootVisualElement.Q("PlayButton");

button.RegisterCallback<GeometryChangedEvent>(OnGeometryChanged);

}

private void OnGeometryChanged(GeometryChangedEvent evt)

{

if (firstGeometryChanged)

{

firstGeometryChanged = false;

var button = document.rootVisualElement.Q("PlayButton");

button.style.rotate = new Rotate(45);

}

}

Songerk · Apr 30, 2024

mcoted3d said: ↑

Yes, or classes that define the transition-duration to something else. It doesn't seem to be the case according to the UI Toolkit debugger screenshot, though.

It works on the latest Unity 6 beta, which version of Unity are you using?

View attachment 1407462
Click to expand...

I recently updated to 2022.3.26

cpalma-unity said: ↑

Hello! Are you setting you rotation on Start? If so, you need to wait for the first GeometryChange event, something like this:

Code (CSharp):

bool firstGeometryChanged = true;

void Start()

{

var button = document.rootVisualElement.Q("PlayButton");

button.RegisterCallback<GeometryChangedEvent>(OnGeometryChanged);

}

private void OnGeometryChanged(GeometryChangedEvent evt)

{

if (firstGeometryChanged)

{

firstGeometryChanged = false;

var button = document.rootVisualElement.Q("PlayButton");

button.style.rotate = new Rotate(45);

}

}

Click to expand...

that actually worked, thank you.
But I still has other problem, setting a new class with new translation and transition, than clicking the button, it just going straight to the value, the same problem as before, but this time I am adding it to a class.

cpalma-unity · Apr 30, 2024

@Songerk I think the problem here is that your transition should be defined before you modify the translation, not at the same time

Songerk · May 1, 2024

cpalma-unity said: ↑

@Songerk I think the problem here is that your transition should be defined before you modify the translation, not at the same time
Click to expand...

No, what I meant , the class already has this values modified in UI Builder, I am not changing them at runtime.
at runtime, I am only adding the class to the element.

cpalma-unity · May 1, 2024

Right. When you click on play you are adding the .levelSelect class to the buttons. The problem is .levelSelect has both the transition and the new value for translate.

You can try to have the transition in a class that is already added to the buttons before you add .levelSelect to them

Songerk · May 2, 2024

cpalma-unity said: ↑

Right. When you click on play you are adding the .levelSelect class to the buttons. The problem is .levelSelect has both the transition and the new value for translate.

You can try to have the transition in a class that is already added to the buttons before you add .levelSelect to them
Click to expand...

Tried that, didn't work.
And about the problem that I had before, I set opacity on the event call of "GeometryChangedEvent" just like you told me, but it's still jump right to the end value.

I Set it like

Code (CSharp):

private void OnGeometryChanged(GeometryChangedEvent evt)

{

_mainScreen.UnregisterCallback<GeometryChangedEvent>(OnGeometryChanged);

_mainScreen.style.opacity = 100;

}

cpalma-unity · May 3, 2024

Tried that, didn't work.
Click to expand...

It's difficult to know without context what could be the problem. The only thing I can think about is to make sure you don't have an inline style for the translation in your element, because the inline style will win over the selector value.

The code for the opacity has one problem. Opacity is a 0..1 value. So it might be jumping to the final value because it goes from 0 to 100 instead of 0 to 1.

Songerk · May 5, 2024

cpalma-unity said: ↑

It's difficult to know without context what could be the problem. The only thing I can think about is to make sure you don't have an inline style for the translation in your element, because the inline style will win over the selector value.

The code for the opacity has one problem. Opacity is a 0..1 value. So it might be jumping to the final value because it goes from 0 to 100 instead of 0 to 1.
Click to expand...

What information do you need to understand the problem better?

And about the second problem, thank you it works, kind of confusing because in the UI builder the opacity range is from 0 to 100.

FreddyC-Unity · May 6, 2024

Hi! Were you able to verify if there are any inline styles overriding the desired behaviour?

If the problem still persists, would you mind sharing some of the code along with the UXML and USS being used? Thank you in advance!

Songerk · May 11, 2024

FreddyC-Unity said: ↑

Hi! Were you able to verify if there are any inline styles overriding the desired behaviour?

If the problem still persists, would you mind sharing some of the code along with the UXML and USS being used? Thank you in advance!
Click to expand...

what do you mean by "inline styles overriding "?

The script that use the UI Document:

Code (CSharp):

using System;

using System.IO;

using UnityEngine;

using UnityEngine.Events;

using UnityEngine.UIElements;

public class MainMenuUiController : MonoBehaviour

{

[SerializeField] private UIDocument _ui;

private VisualElement _mainScreen;

private Button _startButton;

private Button _characterSelect;

private Button _deletSave;

public UnityEvent _startAction;

public UnityEvent _characterSelectButton;

private const string _deleteButtonName = "DeleteSave";

private const string _selectLevelName = "levelSelect";

private const string _mainScreenName = "Main_Screen";

void Start()

{

var root = _ui.rootVisualElement;

_mainScreen = root.Q<VisualElement>(_mainScreenName);

SetVersion(root);

SetButtons();

_mainScreen.RegisterCallback<GeometryChangedEvent>(OnGeometryChanged);

}

private void SetButtons()

{

_startButton = _mainScreen.Q<Button>("PlayButton");

_characterSelect = _mainScreen.Q<Button>("CharacterSelect");

_characterSelect.clicked += SelectCharacter;

_startButton.clicked += StartPlay;

_deletSave = _ui.rootVisualElement.Q<Button>(_deleteButtonName);

_deletSave.clicked += DeleteSaveFile;

}

private void OnGeometryChanged(GeometryChangedEvent evt)

{

_mainScreen.UnregisterCallback<GeometryChangedEvent>(OnGeometryChanged);

_mainScreen.style.opacity = 1;

RegisterCallback<TransitionEndEvent>(_startButton, SetRotationSequnce);

SetRotationBase(_startButton);

RegisterCallback<TransitionEndEvent>(_characterSelect, SetRotationSequnce);

SetRotationBase(_characterSelect);

}

void StartPlay()

{

PressedButton();

_startButton.RegisterCallback<TransitionEndEvent>((evt) => { _startAction?.Invoke(); });

}

void SelectCharacter()

{

PressedButton();

_characterSelect.RegisterCallback<TransitionEndEvent>((evt) => {

Debug.Log("Character Button Pressed");

_characterSelectButton?.Invoke(); });

}

private void PressedButton()

{

ResetAnimation();

_characterSelect.ToggleInClassList(_selectLevelName);

_startButton.ToggleInClassList(_selectLevelName);

}

private void ResetAnimation()

{

_startButton.style.transitionDuration = StyleKeyword.Initial;

_characterSelect.style.transitionDuration = StyleKeyword.Initial;

}

public void RegisterCallback<TEvent>(VisualElement visualElement, Action<VisualElement> callback) where TEvent : EventBase<TEvent>, new()

{

EventCallback<TEvent> eventCallback = new EventCallback<TEvent>((evt) => callback(visualElement));

visualElement.RegisterCallback(eventCallback);

}

private void SetRotationBase(VisualElement element)

{

var rotation = element.resolvedStyle.rotate.angle.value;

element.style.rotate = new StyleRotate(new Rotate(-rotation));

}

private void SetRotationSequnce(VisualElement element)

{

var rotation = element.style.rotate.value.angle.value;

element.style.rotate = new StyleRotate(new Rotate(-rotation));

}

private void DeleteSaveFile()

{

string filePath = Path.Combine(Application.persistentDataPath, "ClothData.json");

if (File.Exists(filePath))

{

var lastName = _deletSave.text;

_deletSave.text = "Save Was Deleted";

File.Delete(filePath);

_deletSave.schedule.Execute(() =>

{

_deletSave.text = lastName;

}).StartingIn(2500);

}

else

{

var lastName = _deletSave.text;

_deletSave.text = "There was No File";

_deletSave.schedule.Execute(() =>

{

_deletSave.text = lastName;

}).StartingIn(2500);

}

}

private void SetVersion(VisualElement root)

{

var label = root.Q<Label>("Version");

label.text = ($"Version: {Application.version}");

}

}

The UXML:

Code (CSharp):

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">

<Style src="project://database/Assets/_Project/Art/UI%20Tool%20Kit/StartMenu/Button.uss?fileID=7433441132597879392&guid=0b3ab8fdc2652524e85f20825c933be9&type=3#Button" />

<Style src="project://database/Assets/_Project/Art/UI%20Tool%20Kit/StartMenu/AspectRation.uss?fileID=7433441132597879392&guid=fd1b298db0177dc41b07f8922d935b38&type=3#AspectRation" />

<SafeAreaManager>

<ui:VisualElement name="Main_Screen" style="flex-grow: 1; background-color: rgba(0, 0, 0, 0); background-image: none; margin-left: 74px; margin-right: 74px; margin-top: 74px; margin-bottom: 74px; padding-left: 41px; padding-right: 41px; padding-top: 41px; padding-bottom: 41px; opacity: 0; transition-property: opacity; transition-duration: 4s; transition-timing-function: ease-out;">

<ui:VisualElement picking-mode="Ignore" name="Logo" style="flex-grow: 1; background-color: rgba(0, 0, 0, 0); height: 40%;">

<ui:VisualElement style="flex-grow: 1; background-color: rgba(0, 0, 0, 0); -unity-slice-left: 0; -unity-slice-top: 0; -unity-slice-right: 0; -unity-slice-bottom: 0; padding-left: 0; margin-left: 8%; margin-right: 8%; flex-shrink: 0; justify-content: center; align-items: center; margin-top: 0; padding-top: 0; margin-bottom: 0;">

<ui:Label tabindex="-1" text="UntitleGame" parse-escape-sequences="true" display-tooltip-when-elided="true" style="font-size: 107px; -unity-font: url("project://database/Assets/_Project/Art/UI%20Tool%20Kit/UnityDefaultRuntimeTheme.tss?fileID=2230732570650464555&guid=c04ea85137589f94ba90e30be9953adb&type=3#NotInter-Regular"); -unity-font-definition: url("project://database/Assets/_Project/Art/Font/LilitaOne-Regular%20SDF.asset?fileID=11400000&guid=a81274d4161429c498209a90a46ca168&type=2#LilitaOne-Regular SDF");" />

</ui:VisualElement>

</ui:VisualElement>

<ui:VisualElement name="Buttons" picking-mode="Ignore" style="flex-grow: 1; background-color: rgba(0, 0, 0, 0); flex-shrink: 1; height: 60%;">

<ui:VisualElement name="MainButtons" picking-mode="Ignore" style="flex-grow: 1; background-color: rgba(0, 0, 0, 0); height: 60%; margin-bottom: 94px; padding-top: 0; margin-left: 94px; margin-right: 94px; margin-top: 94px; -unity-slice-bottom: 0; width: auto; min-width: 225px; justify-content: center;">

<ui:Button text="Play" display-tooltip-when-elided="true" name="PlayButton" view-data-key="PlayButton" class="menu-button" style="justify-content: flex-start; align-self: auto; align-items: stretch; max-height: none; min-height: 88px; font-size: 49px; -unity-font-style: normal; background-image: none; background-color: rgba(236, 230, 230, 0.44); -unity-font: initial; -unity-font-definition: url("project://database/Assets/_Project/Art/Font/LilitaOne-Regular%20SDF.asset?fileID=11400000&guid=a81274d4161429c498209a90a46ca168&type=2#LilitaOne-Regular SDF"); -unity-text-align: lower-center; text-overflow: clip; letter-spacing: 0; rotate: 1deg;" />

<ui:Button text="Character Select" display-tooltip-when-elided="true" name="CharacterSelect" view-data-key="CharacterSelect" class="menu-button" style="justify-content: flex-start; align-self: auto; align-items: stretch; max-height: none; min-height: 88px; font-size: 49px; -unity-font-style: normal; background-image: none; background-color: rgba(236, 230, 230, 0.44); -unity-font: initial; -unity-font-definition: url("project://database/Assets/_Project/Art/Font/LilitaOne-Regular%20SDF.asset?fileID=11400000&guid=a81274d4161429c498209a90a46ca168&type=2#LilitaOne-Regular SDF"); -unity-text-align: lower-center; text-overflow: clip; letter-spacing: 0; rotate: -1deg;" />

</ui:VisualElement>

<ui:VisualElement name="VisualElement" style="flex-grow: 1; background-color: rgba(0, 0, 0, 0); height: 30%; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; justify-content: center; align-items: flex-start; flex-direction: column; margin-left: 20px; margin-right: 20px; margin-top: 20px; margin-bottom: 20px;" />

</ui:VisualElement>

</ui:VisualElement>

<ui:Button text="Delete Save" parse-escape-sequences="true" display-tooltip-when-elided="true" name="DeleteSave" style="position: absolute; bottom: 5%; left: 5%; flex-grow: 1; width: auto; -unity-font-definition: url("project://database/Assets/_Project/Art/Font/LilitaOne-Regular%20SDF.asset?fileID=11400000&guid=a81274d4161429c498209a90a46ca168&type=2#LilitaOne-Regular SDF"); min-width: 200px; font-size: 30px;" />

<ui:Label tabindex="-1" text="Label" parse-escape-sequences="true" display-tooltip-when-elided="true" name="Version" style="position: absolute; bottom: 5%; right: 5%; font-size: 36px;" />

</SafeAreaManager>

</ui:UXML>

The USS:

Code (CSharp):

.CircleButton {

align-self: flex-start;

border-top-left-radius: 86px;

border-bottom-left-radius: 86px;

border-top-right-radius: 86px;

border-bottom-right-radius: 86px;

border-left-width: 0;

padding-left: 9px;

padding-right: 9px;

padding-top: 9px;

padding-bottom: 9px;

margin-left: 12px;

min-width: 180px;

min-height: 180px;

}

.menu-button {

margin-top: 25px;

margin-right: 25px;

margin-bottom: 25px;

margin-left: 25px;

border-bottom-color: rgba(148, 148, 148, 0.65);

border-top-left-radius: 29px;

border-top-right-radius: 29px;

border-bottom-right-radius: 29px;

border-bottom-left-radius: 29px;

border-top-width: 12px;

border-right-width: 12px;

border-bottom-width: 16px;

border-left-width: 12px;

border-top-color: rgba(255, 255, 255, 0);

border-left-color: rgba(255, 255, 255, 0);

border-right-color: rgba(255, 255, 255, 0);

transition-property: rotate;

transition-duration: 2s;

transition-timing-function: ease-in-out;

transition-delay: 0s;

}

.menu-button:active {

transition-duration: 0.2s, 0.1s;

transition-property: scale, font-size;

transition-timing-function: ease-out-bounce, ease;

scale: 0.95 0.95;

transition-delay: 0s, 0s;

font-size: 50px;

border-top-width: 0;

border-right-width: 0;

border-bottom-width: 0;

border-left-width: 0;

}

.cornerButton {

border-top-width: 2px;

border-right-width: 2px;

border-bottom-width: 2px;

border-left-width: 2px;

border-top-left-radius: 150px;

border-top-right-radius: 150px;

border-bottom-right-radius: 150px;

border-bottom-left-radius: 150px;

width: 150px;

scale: 1 1;

height: 150px;

margin-top: 32px;

margin-right: 32px;

margin-bottom: 32px;

margin-left: 32px;

background-color: rgba(0, 0, 0, 0.18);

font-size: 28px;

}

.cornerButton:active {

scale: 0.8 0.8;

}

.vanish {

transition-duration: 0.2s;

opacity: 0;

display: flex;

visibility: visible;

}

.highlight {

border-left-color: rgba(0, 97, 255, 0.57);

border-right-color: rgba(0, 97, 255, 0.57);

border-top-color: rgba(0, 97, 255, 0.57);

border-bottom-color: rgba(0, 97, 255, 0.57);

border-top-width: 13px;

border-right-width: 13px;

border-bottom-width: 13px;

border-left-width: 13px;

border-top-left-radius: 44px;

border-top-right-radius: 44px;

border-bottom-right-radius: 44px;

border-bottom-left-radius: 44px;

background-color: rgba(53, 143, 255, 0.07);

opacity: 1;

transition-duration: 1s;

transition-timing-function: ease-in-bounce;

}

.levelSelect {

translate: 0 200%;

display: flex;

transition-property: translate;

transition-duration: 20s;

transition-timing-function: ease-in;

transition-delay: 0s;

}

Search Unity

Question Transition not happening

Songerk

mcoted3d

Unity Technologies

Songerk

mcoted3d

Unity Technologies

cpalma-unity

Unity Technologies

Songerk

cpalma-unity

Unity Technologies

Songerk

cpalma-unity

Unity Technologies

Songerk

cpalma-unity

Unity Technologies

Songerk

FreddyC-Unity

Unity Technologies

Songerk

Search Unity

Unity ID

Useful Searches

Question Transition not happening

Unity Technologies

Unity Technologies

Unity Technologies

Unity Technologies

Unity Technologies

Unity Technologies

Unity Technologies