arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-28 19:00:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Toaster): wrong leave animation when collapsed

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-11 16:03:50 +02:00
parent 4dcb74e0a9
commit c3ed18beb6
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/templates.ts
View File

@@ -35,13 +35,13 @@ export function addTemplates (options: ModuleOptions, nuxt: Nuxt) {
to { height: var(--radix-collapsible-content-height); } to { height: var(--radix-collapsible-content-height); }
} }
@keyframes toast-slide-down { @keyframes toast-collapsed-closed {
from { transform: var(--transform); } from { transform: var(--transform); }
to { transform: translateY(calc((var(--offset) - var(--height)) * -1px)); } to { transform: translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale)); }
} }
@keyframes toast-slide-up { @keyframes toast-closed {
from { transform: var(--transform); } from { transform: var(--transform); }
to { transform: translateY(calc((var(--offset) - var(--height)) * 1px)); } to { transform: translateY(calc((var(--offset) - var(--height)) * var(--translate-factor))); }
} }
@keyframes toast-slide-left { @keyframes toast-slide-left {
from { transform: translateX(0) translateY(var(--translate)); } from { transform: translateX(0) translateY(var(--translate)); }

6
src/theme/toaster.ts
View File

@@ -1,7 +1,7 @@
export default { export default {
slots: { slots: {
viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height]', viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height]',
base: 'absolute inset-x-0 z-[--index] transform-[--transform] data-[expanded=false]:data-[front=false]:h-[--front-height] data-[expanded=false]:data-[front=false]:*:invisible data-[swipe=move]:transition-none transition-[transform,height] will-change-[transform,height] duration-200 ease-out' base: 'absolute inset-x-0 z-[--index] transform-[--transform] data-[expanded=false]:data-[front=false]:h-[--front-height] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,height] will-change-[transform,height] duration-200 ease-out'
}, },
variants: { variants: {
position: { position: {
@@ -35,13 +35,13 @@ export default {
position: ['top-left', 'top-center', 'top-right'], position: ['top-left', 'top-center', 'top-right'],
class: { class: {
viewport: 'top-4', viewport: 'top-4',
base: 'top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[toast-slide-up_200ms_ease-in-out]' base: 'top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]'
} }
}, { }, {
position: ['bottom-left', 'bottom-center', 'bottom-right'], position: ['bottom-left', 'bottom-center', 'bottom-right'],
class: { class: {
viewport: 'bottom-4', viewport: 'bottom-4',
base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[toast-slide-down_200ms_ease-in-out]' base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]'
} }
}, { }, {
swipeDirection: ['left', 'right'], swipeDirection: ['left', 'right'],