Flipped popper CSS

[Daniel-Walbolt]

Hello, I implemented my own advanced transition following the floating-vue documentation.

Here's what the CSS looks like

.v-popper__popper.v-popper__popper--show-from .v-popper__wrapper {
      transform: scale(.5);
      translate: 0 10%;
}
    
.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
      transform: none;
      translate: none;
      transition: transform var(--popper-transition-duration), translate 0.4s;
}

.v-popper__popper--hide-from .v-popper__wrapper {
      transform: none;
      translate: none;
}
    
 .v-popper__popper--hide-to .v-popper__wrapper {
      transform: scale(0.5);
      translate: 0 10%;
      transition: transform 0.4s, translate var(--popper-transition-duration);
}

When anchored above the reference element, the pop-up looks like it comes from the reference smoothly. However, say the user scrolls down enough for the pop-up to appear below the reference element because of the flip() feature from floating-ui. The transition no longer has the same effect. It's subtle, but I think it should be possible.

Just wondering if there is a way to detect in the CSS that the popper is flipped, something like:

.v-popper__popper.v-popper__popper--show-from .v-popper__wrapper {
      transform: scale(.5);
      translate: 0 10%;
}
.v-popper__popper.v-popper__popper--show-from.v-popper__popper--flipped .v-popper__wrapper {
      translate: 0 -10%;
}