Transitions for decorators not supported?

[v-atamanenko]

Hello, it would seem that doing this:

.test
{
	decorator: linear-gradient(105deg, #1E1E1E 0%, #1D1D1D 100%);
	transition: 2s decorator linear-in-out;
}

.test:hover
{
	decorator: linear-gradient(105deg, #193233 0%, #192326 100%);
}

Makes the element instantly change background after a 2s delay instead of the expected gradual transition. According to the docs, all properties should be supported?

[mikke89]

Hey. In general, we do support interpolation of decorators, although there are some cases where we fall back to discrete interpolation.

So in this case, the angle for example will be interpolated if you try to change that in the hover decorator. The more tricky part is the color stop list, here we simply fall back to discrete interpolation currently. Which gives the result you describe. In the general sense, it is not trivial to define interpolation for an arbitrary list, as I'm sure you can imagine, think of varying number of stops for example. It looks like even CSS doesn't define how to interpolate that, they don't seem to support interpolation for gradients at all as far as I can tell.

In this specific case though, where we have the same number of stops, we could take a straightforward approach and interpolate the colors and positions of each stop. I am working on that right now, since that seems quite useful.

In general, be aware that interpolation doesn't always imply gradual transitions. In some cases discrete interpolation is necessary, think of e.g. keywords. Also, while we do support interpolation for most properties, not for all of them, as documented here.

[v-atamanenko]

THANK YOU! Yes, this implementation is exactly what I expected/hoped for. Looks perfect now!