Popover d’alerte avec @starting-style
HTML
index.html <div>
<button popovertarget="success" popovertargetaction="toggle">Toggle auto</button>
<div id="success" popover="auto" role="alert">Success !</div>
</div>
CSS
style.css @layer demo {
[popover] {
/* Final state of the exit animation */
opacity: 0;
transform: translateX(100%);
transition: opacity 0.7s, transform 0.7s, display 0.7s allow-discrete;
&:popover-open {
opacity: 1;
transform: translateX(0);
@starting-style {
opacity: 0;
transform: translateX(100%);
}
}
}
}
@layer demoStyles {
:root {
--border-color: green;
}
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body > div {
display: flex;
gap: 2rem;
}
button {
background: white;
padding: 1rem;
color: var(--border-color);
border-radius: 100vmax;
box-shadow: 0 0 25px 5px hsla(0deg 0% 0% / 100%);
border: 3px solid var(--border-color);
&[popovertarget="info"] {
--border-color: blue;
}
&[popovertarget="error"] {
--border-color: red;
}
&[popovertarget="warning"] {
--border-color: orange;
}
&[popovertarget="success"] {
--border-color: green;
}
}
[id="info"] {
--border-color: blue;
}
[id="success"] {
--border-color: green;
}
[id="error"] {
--border-color: red;
}
[id="warning"] {
--border-color: orange;
}
[popover] {
position: fixed;
inset-inline: auto 2vw;
top: 2vw;
padding: 1rem;
color: white;
background-image: linear-gradient(
45deg,
black,
color-mix(in oklch, var(--border-color), black)
);
box-shadow: 0 0 25px 5px hsla(0deg 0% 0% / 100%);
border: 1px solid var(--border-color);
}
}