The problem

There is only one transition component wrapped around the vue popover, but you need to animate the mask and slot separately.

If this is written according to SCSS rules, it will not take effect

.slide-enter..slide-leave-to {
  .slot{
    transform: translate3d(0.100%.0); }}Copy the code

The solution

It takes effect when written according to the CSS rules

.slide-enter .slot..slide-leave-to .slot {
  transform: translate3d(0.100%.0);
}
Copy the code

why

Popup renders an empty node directly in the outer layer. Overlay masks and slots are rendered separately in the inner layer

return (
    <>
      {renderOverlay()}
      {renderTransition()}
    </>
);
Copy the code