Transition Var Bug

Unity Engine
,
1

Hi,

Using a Var with transition-duration doesn’t work.

transition-duration: var(--button-hover-animation-duration);

Is this a known issue?

Thanks!

2

Hi!
Can you paste the content of the style sheet? With just this line, it’s hard to say if it should work or not.
Thanks!

3

No problem! Here is the file.

Also, this doesn’t work with variables either.

translate: var(--button-hover-slide-animation-distance);

:root {
    --text-color: rgb(136, 33, 213);
    --icon-color: rgb(136, 33, 213);
    --selection-indicator-color: rgb(108, 33, 164);
    --numbers-font: url('project://database/Assets/UIToolkit/Resources/Fonts%20&%20Materials/PressStart2P-Regular%20SDF%20UITK.asset?fileID=11400000&guid=4ecce826f7f0e4d38b1808702431b775&type=2#PressStart2P-Regular SDF UITK');
    --josefinSan-word-spacing: -7px;
    --main-menu-round-menu-button-offset: 50px;
    --circle-color: rgb(105, 40, 235);
    --square-color: rgb(248, 42, 42);
    --triangle-color: rgb(255, 198, 0);
    --diamond-color: rgb(0, 189, 0);
    --bronze-time-crown-color: rgb(205, 127, 50);
    --silver-time-crown-color: rgb(146, 146, 146);
    --gold-time-crown-color: rgb(255, 158, 0);
    --button-hover-animation-duration: 2;
    --button-hover-grow-animation-scale: 1.1 1.1;
    --button-hover-slide-animation-distance: 0 20;
}

.button-hover-grow-animation {
    transition-duration: var(--button-hover-animation-duration);
    transition-property: scale;
    transition-timing-function: ease-out;
}

.button-hover-grow-animation:hover {
    scale: var(--button-hover-grow-animation-scale);
}

.button-hover-grow-animation:active {
    scale: var(--button-hover-grow-animation-scale);
}

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

.button-hover-slide-animation:hover {
    translate: var(--button-hover-slide-animation-distance);
}
4

Regarding the transition-duration property, you need to specify the unit:

--button-hover-slide-animation-distance: 250ms;
1 Like
5

Ah, that is what was missing! Thanks.

For anyone else looking, you need to use px for the transition property to use it as a variable.