From 6d300ba59428341419e4cad567c98751aa72eead Mon Sep 17 00:00:00 2001 From: Sam Nystrom Date: Sat, 16 Mar 2024 21:05:31 +0000 Subject: feat: animate ButtonMenu dropdown --- src/components/ButtonMenu.css | 31 ++++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/src/components/ButtonMenu.css b/src/components/ButtonMenu.css index c454849..45d986a 100644 --- a/src/components/ButtonMenu.css +++ b/src/components/ButtonMenu.css @@ -3,7 +3,7 @@ > button { position: relative; padding-left: 2.5rem; - + &::before { content: ''; width: 1rem; @@ -13,20 +13,41 @@ background: url('../icons/chevron-right.svg'); background-position: left 2px center; background-repeat: no-repeat; - transition: transform 0.2s; } + &:has(+ :popover-open)::before { transform: rotate(90deg); } + + @media not (prefers-reduced-motion) { + &::before { + transition: transform 0.2s; + } + } } [popover] { inset: unset; - top: 0; + top: var(--anchor-y); left: var(--anchor-x); - &:popover-open { - top: var(--anchor-y); + @media not (prefers-reduced-motion) { + transform: translate(0, -100%); + clip-path: xywh(0 100% 100% 100%); + + transition-property: transform, clip-path, overlay, display; + transition-duration: 0.2s; + transition-behavior: allow-discrete; + + &:popover-open { + transform: none; + clip-path: xywh(0 0 100% 100%); + + @starting-style { + transform: translate(0, -100%); + clip-path: xywh(0 100% 100% 100%); + } + } } } } -- cgit v1.2.3