Resolved Transition Var Bug

Hi,

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

Code (CSharp):

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

Is this a known issue?

Thanks!

 

No problem! Here is the file.

Also, this doesn't work with variables either.

Code (CSharp):

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

Code (CSharp):

1. :root {
2.     --text-color: rgb(136, 33, 213);
3.     --icon-color: rgb(136, 33, 213);
4.     --selection-indicator-color: rgb(108, 33, 164);
5.     --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');
6.     --josefinSan-word-spacing: -7px;
7.     --main-menu-round-menu-button-offset: 50px;
8.     --circle-color: rgb(105, 40, 235);
9.     --square-color: rgb(248, 42, 42);
10.     --triangle-color: rgb(255, 198, 0);
11.     --diamond-color: rgb(0, 189, 0);
12.     --bronze-time-crown-color: rgb(205, 127, 50);
13.     --silver-time-crown-color: rgb(146, 146, 146);
14.     --gold-time-crown-color: rgb(255, 158, 0);
15.     --button-hover-animation-duration: 2;
16.     --button-hover-grow-animation-scale: 1.1 1.1;
17.     --button-hover-slide-animation-distance: 0 20;
18. }
19.  
20. .button-hover-grow-animation {
21.     transition-duration: var(--button-hover-animation-duration);
22.     transition-property: scale;
23.     transition-timing-function: ease-out;
24. }
25.  
26. .button-hover-grow-animation:hover {
27.     scale: var(--button-hover-grow-animation-scale);
28. }
29.  
30. .button-hover-grow-animation:active {
31.     scale: var(--button-hover-grow-animation-scale);
32. }
33.  
34. .button-hover-slide-animation {
35.     transition-duration: var(--button-hover-animation-duration);
36.     transition-property: translate;
37.     transition-timing-function: ease-out;
38. }
39.  
40. .button-hover-slide-animation:hover {
41.     translate: var(--button-hover-slide-animation-distance);
42. }
43.  
44.  

 

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.