From 5b299ce5ba54e94b364cff70433814a670dab74f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Wed, 12 Feb 2025 11:26:58 +0500
Subject: [PATCH] fix: animation in 'Toast'
---
src/Playground.vue | 8 +--
src/components/Toast/Toast.vue | 103 +++++++++++++++++----------------
2 files changed, 57 insertions(+), 54 deletions(-)
diff --git a/src/Playground.vue b/src/Playground.vue
index 922f5f9..12ecacd 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -197,10 +197,10 @@ const openDrawer = () => (visibleDrawer.value = true);
"
/>
<Button label="Open toast" @click="toast2 = true" />
- <Toast v-model="toast" static type="success" position="top" width="500px" />
- <Toast v-model="toast4" type="info" position="top" width="500px" />
- <Toast v-model="toast3" type="warn" position="top" width="500px" />
- <Toast v-model="toast2" type="error" position="top" width="500px" />
+ <Toast v-model="toast" static duration="60" type="success" position="top" width="500px" />
+ <Toast v-model="toast4" duration="60" type="info" position="top" width="500px" />
+ <Toast v-model="toast3" duration="60" type="warn" position="top" width="500px" />
+ <Toast v-model="toast2" duration="60" type="error" position="top" width="500px" />
<Rating theme="red">
<template #offIcon>
<CrossIcon color="red" />
diff --git a/src/components/Toast/Toast.vue b/src/components/Toast/Toast.vue
index 67a6509..5246605 100644
--- a/src/components/Toast/Toast.vue
+++ b/src/components/Toast/Toast.vue
@@ -38,13 +38,15 @@ const typeToIcon: Record<TToastType, string> = {
const active = defineModel() as Ref<boolean>;
-let toastsContainer: HTMLElement = document.querySelector(`.toasts-container.${props.position}`)!;
+let toastsContainer: HTMLElement = document.querySelector(`.toasts-container.${props.position}`) as HTMLElement;
const toast = ref<HTMLElement>() as Ref<HTMLElement>;
-watch([toast], () => {
- if (toast.value) {
+watch([toast, () => props.static], () => {
+ if (toast.value && !props.static) {
toastsContainer?.appendChild(toast.value);
}
+ if (props.static) {
+ }
});
const themeColor = computed<TThemeColor>(() => props.theme ?? typeToTheme[props.type]);
@@ -64,7 +66,9 @@ const backgroundColor = computed(() =>
const borderColor = computed(() => convertThemeToColor(themeColor.value, '500'));
const fontSize = computed(() => getValueFromSize(props.size, ['12px', '16px', '20px', '24px']));
const padding = computed(
- () => getValueFromSize(props.size, ['7px 10px', '10px 15px', '14px 20px', '20px 30px']) as string,
+ () =>
+ (props.static || active.value) &&
+ (getValueFromSize(props.size, ['7px 10px', '10px 15px', '14px 20px', '20px 30px']) as string),
);
const gap = computed(() =>
props.size === 'normal' ? '10px' : props.size === 'large' || props.size === 'huge' ? '15px' : '5px',
@@ -91,24 +95,26 @@ const styles = computed(() => {
if (positionParts.value.length === 1) {
const position = positionParts.value[0];
// if (position === 'left' || position === 'right')
- // return `${position}: -100%; top: 50%; transform: translateY(-50%);`;
- return `${position}: -100%; left: 50%; transform: translateX(-50%);`;
+ // return `${position}: -100%; top: 50%; transform: translateY(-50%)`;
+ return `${position}: -100%; left: 50%; transform: translateX(-50%)`;
}
- return `${positionParts.value[0]}: -100%; ${positionParts.value[1]}: 20px;`;
+ return `${positionParts.value[0]}: -100%; ${positionParts.value[1]}: 20px`;
});
const initContainer = () => {
- if (!toastsContainer) {
+ if (!toastsContainer && !props.static) {
toastsContainer = document.createElement('div');
toastsContainer.classList.add('toasts-container');
toastsContainer.classList.add(`${props.position}`);
- toastsContainer.style = `
- position: fixed;
- display: flex;
- flex-direction: ${positionParts.value.find((i) => i === 'bottom') ? 'column-reverse' : 'column'};
- gap: 20px;
- transition: all 0.4s ease-in-out;
- ${styles.value}
- `;
+ toastsContainer.style.position = 'fixed';
+ toastsContainer.style.zIndex = '9999';
+ toastsContainer.style.display = 'flex';
+ toastsContainer.style.flexDirection = positionParts.value.find((i) => i === 'bottom') ? 'column-reverse' : 'column';
+ toastsContainer.style.transition = 'all 0.5s ease-in-out';
+ for (const item of styles.value.split('; ')) {
+ const splatItem = item.split(':');
+ if (splatItem[0] === '') break;
+ toastsContainer.style[splatItem[0]] = splatItem[1];
+ }
document.body.appendChild(toastsContainer);
}
};
@@ -125,33 +131,18 @@ const closeToast = () => (active.value = false);
let timeout: number;
-if (props.duration) {
- watch(active, () => {
- if (active.value) {
- toast.value.classList.add('active');
- const activeToasts = document.querySelectorAll(`.toast-container.${props.position}.active`);
- let activeToastsHeight = 0;
- for (const toast of activeToasts) {
- activeToastsHeight += toast.offsetHeight;
- }
- toast.value.style.order = '9999';
- const offset = activeToastsHeight + 20 * activeToasts.length;
- toastsContainer.style[positionParts.value[0] as 'top' | 'bottom'] = offset - toastsContainer?.clientHeight + 'px';
- timeout = setTimeout(() => (active.value = false), (props.duration as number) * 1000);
- } else {
- toast.value.classList.remove('active');
- const activeToasts = document.querySelectorAll(`.toast-container.${props.position}.active`);
- let activeToastsHeight = 0;
- for (const toast of activeToasts) {
- activeToastsHeight += toast.offsetHeight;
- }
- toast.value.style.order = '1';
- const offset = activeToastsHeight + 20 * activeToasts.length;
- toastsContainer.style[positionParts.value[0] as 'top' | 'bottom'] = offset - toastsContainer?.clientHeight + 'px';
- clearTimeout(timeout);
- }
- });
-}
+watch(active, () => {
+ console.log('props.duration,props.static:', props.duration, props.static);
+ if (props.static) return;
+ if (active.value) {
+ toast.value.classList.add('active');
+ toastsContainer.style[positionParts.value[0] as 'top' | 'bottom'] = '20px';
+ timeout = setTimeout(() => (active.value = false), (props.duration as number) * 1000);
+ } else if (props.duration) {
+ toast.value.classList.remove('active');
+ clearTimeout(timeout);
+ }
+});
</script>
<template>
@@ -165,7 +156,7 @@ if (props.duration) {
oneAxis: positionParts.length === 1,
},
]"
- :style="`position: relative;
+ :style="`position: relative; margin-bottom: ${active ? '20px' : '0'};
${styles}`"
>
<h3 class="toast-header" :style="`font-size: calc(${fontSize} + 4px)`">
@@ -176,7 +167,7 @@ if (props.duration) {
<CrossIcon
@click="closeToast"
class="toast-close_button"
- :style="`top: ${padding.split(' ')[0]}; right: ${padding.split(' ')[1]}`"
+ :style="`top: ${padding && padding.split(' ')[0]}; right: ${padding && padding.split(' ')[1]}`"
:color="color"
:size="iconSize"
/>
@@ -189,7 +180,11 @@ if (props.duration) {
padding: v-bind(padding);
border: 1px solid v-bind(borderColor);
border-radius: 7px;
- transition: all 0.5s ease-in-out;
+ transition:
+ all 0.5s ease-in-out,
+ max-height 0.01s ease-in-out,
+ padding 0.2s ease-in-out,
+ margin 0.2s ease-in-out;
width: v-bind(width);
::before {
content: '';
@@ -225,27 +220,35 @@ if (props.duration) {
display: block;
}
.top {
- transform: translateY(-1000px);
+ transform: translateY(-500px);
+ max-height: 0;
}
.bottom {
- transform: translateY(1000px);
+ transform: translateY(500px);
+ max-height: 0;
}
.active.top {
transform: translateY(0);
+ max-height: 1000px;
}
.active.bottom {
transform: translateY(0);
+ max-height: 1000px;
}
.oneAxis.top {
- transform: translate(-50%, -1000px) !important;
+ transform: translate(-50%, -500px) !important;
+ max-height: 0;
}
.oneAxis.bottom {
- transform: translate(-50%, 1000px) !important;
+ transform: translate(-50%, 500px) !important;
+ max-height: 0;
}
.oneAxis.active.top {
transform: translate(-50%, 0) !important;
+ max-height: 1000px;
}
.oneAxis.active.bottom {
transform: translate(-50%, 0) !important;
+ max-height: 1000px;
}
</style>
--
GitLab