I don't doubt that the above code works, but I cannot see the point of
The way the default markup is done, all instances of
This works just as well:The use of @starting-style is a good trick though. I hadn't seen that one before.
.dropdown-toggle + .dropdownThe way the default markup is done, all instances of
.dropdown are also .dropdown-toggle + .dropdown. In terms of targeting the only difference is that the latter has higher specificity. That's useful in some situations but does not appear to be useful here. The declarations later in the cascade will overrule the earlier ones even without greater specificity. IOW, the code can be simplified.This works just as well:
Code:
.dropdown {opacity: 1;transform: scaleY(1);transform-origin: top;transition-property: opacity, transform, overlay, display;transition-duration: 0.4s;transition-behavior: allow-discrete;}.dropdown-up .dropdown {transform-origin: bottom;}@starting-style {.dropdown {opacity: 0;transform: scaleY(0);}}Statistics: Posted by Gumboots — Tue Apr 29, 2025 11:15 pm