Description
When adding animations to elements making use of anchor positioning, it would be useful to be able to change the transform-origin
and translate
depending on the position of the anchor. This would be possible if a custom @position-try
could include the transform-origin
property.
This Codepen demonstrates the sort of effects developers may want to achieve that are dependent on transform-origin
being set in the appropriate place. Here's an example of how broken the animation looks when flip-block
repositions the popover.
An example of using tranlate
: the following transition works well when a dropdown is shown below the button that opens it, but would look strange if the dropdown is above the button.
[popover]:popover-open {
opacity: 1;
translate: 0 0;
transition: opacity .2s, translate .25s, display .25s allow-discrete, overlay .25s allow-discrete;
}
@starting-style {
[popover]:popover-open {
opacity: 0;
translate: 0 -4px;
}
}
I wanted it to look like the anchored popover was literally dropping down from the button, which only makes sense if it is below the button.