Popover API & discrete property transitions

In order for all of this to transition popovers in and out smoothly, the web needs some way to animate discrete properties. These are properties that typically weren’t animatable in the past, such animating to and from the top-layer and animating to and from display: none.

As a part of the work to enable nice transitions for popovers, selectmenus, and even existing elements like dialogs or custom components, browsers are enabling new plumbing to support these animations.

popover：

Basic Usage

Use popover & popovertarget attribute to elements to let them have connection for each other.

<div id="md3-dialogs" popover> <!-- Popover content goes in here --> ... ... </div> <button popovertarget="md3-dialogs"> show the popover </button>

Attribute popover has two value for differebt purpose.

- auto (default): can be "light dismissed" by selecting outside the popover area. esc can dismissed popover element too.
- manual: must always be explicitly hidden, but allow for use cases such as nested popovers in menus.

Style Customization

The following popover demo, animates popovers in and out using :popover-open for the open state, @starting-style for the before-open state, and applies a transform value to the element directly for the after-open-is-closed state. To make this all work with display, it needs adding to the transition property, like so:

<style> .md3-dialogs { &:popover-open { /* 1. open (changed) state */ transition-timing-function: cubic-bezier(0,.86,.18,1); transition-duration: 300ms; transform: translateY(0) scaleY(1); opacity: 1; &::backdrop { background-color: rgba(0 0 0/.4); } /* 0. before-change */ @starting-style { transform: translateY(-20px) scaleY(0); opacity: 0; } } &::backdrop { background-color: rgba(0 0 0/0); } /* 2. After-change state */ transform: translateY(-30px) scaleY(1); opacity: 0; transform-origin: 50% 0%; /* enumarate transitioning properties, including display / overlay */ transition: transform 200ms ease-out, opacity 200ms, display 200ms, overlay 200ms; transition-behavior: allow-discrete; } </style>

Reference

Dialog Title

A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.