popover animations

Tips

Look Ma, no JavaScript!

✅ Apply allow-discrete.

This ensures you can animate the popover. 
Why? By default the popover is hidden with display: none;
With transition-behavior: allow-discrete; you can animate the display property. 

[popover] {
	transition-behavior: allow-discrete;
}

✅ Apply a starting-style to ensure a fade-in animation.

[popover]:popover-open {
	@starting-style {
		opacity: 0;
		transform: translateY(var(--animation-transform-offset));
	}

	opacity: 1;
	...
}

✅ Use button attributes to open and close the popover instead of JavaScript.

<div popover="auto" id="popover-id" aria-labelledby="popover-id">
...
</div>

<button popovertarget="popover-id" popovertargetaction="show">Open popover</button>
<button popovertarget="popover-id" popovertargetaction="hide">Close popover</button>

❌ Don't set the display to flex/grid/block etc. as default style on a element with a popover attribute.

Ensures the popover is on top of your content. 
Even if it's hidden in this case due to the opacity: 0;
This ensures you cannot interact with your content.

[popover] {
	display: flex;
}