Animation

You can animate the suggestion decoration (ghost text) and the popup/inline panel using decoration state and CSS transitions.

Close animation lifecycle

When the user dismisses the menu (Escape or click outside), the decoration goes from suggest-active to suggest-closing, then is removed after a short delay. Use CSS transitions on these classes (e.g. opacity) to get a smooth fade-out. The exact class name for the closing phase can be set via decorationClass in the extension or menu options.

Popup and inline panel

The popup (or inline panel) is shown/hidden by the component tree. You can add open animations by transitioning on mount (e.g. opacity + transform) in your Popup or panel wrapper. The list appears when the session opens and unmounts when it closes; coordinate with the decoration’s closing state if you want both to animate together.