Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Rename @initial to @starting-style #6390

Merged
merged 1 commit into from
May 23, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions site/en/blog/whats-new-css-ui-2023/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -595,13 +595,13 @@ In order for all of this to transition popovers in and out smoothly, the web nee

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.

The following popover demo, animates popovers in and out using `:popover-open` for the open state, `@initial` 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:
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:

```css
.settings-popover {
&:popover-open {
/* 0. before-change */
@initial {
@starting-style {
transform: translateY(20px);
opacity: 0;
}
Expand Down Expand Up @@ -631,10 +631,6 @@ The following popover demo, animates popovers in and out using `:popover-open` f
tab: 'result'
} %}

{% Aside 'caution' %}
This is currently an experimental API, and the syntax for `@initial` might change before going stable.
{% endAside %}

## Interactions

Which brings us to interactions, the last stop on this tour of web UI features.
Expand Down