Hello ! ^^
This might not be considered a bug but that’s something a UI designer in my team noticed.
When adding a class with a background-color and a defined transition animation, the transition doesn’t start with a transparent background. See the following gif :
In this case, the transition starts with a black background (when the warning icon appears) before easing into the final background color.
Is it normal ?
(I told them they should first set an initial background color but it’s not as intuitive as they’d like)
It seems like a bug, could you submit a repro through the bug reporter please? Go to Help > Report a bug… and don’t forget to add this forum link to the case and post the case number here for easier cross referencing. Thanks!
1 Like
Looking at the repro project from the bug report, I believe it is doing what it’s supposed to do.
When the background color is not set at all on the element, it will be resolved as rgba(0, 0, 0, 0), so transparent black. So in this case, the transition will go from transparent black to opaque white, so as the alpha is getting from 0 to 1, so will the actual color, giving the darker to lighter transition. If they want only the opacity to transition, they will need to have a selector setting the “default” color to rgba(255, 255, 255, 0).
Note also that when using the rgba function, the alpha should be clamped between 0 and 1.
However, I’m noticing that the transition is occurring in the Builder outside of the Preview mode, which it is not supposed to, so we’ll go ahead and fix that.
Hope this helps!
