chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: delay animation so that it start different

Browse source
This commit is contained in:
Methapon Metanipat 2024-11-07 16:12:28 +07:00
parent 549ac70413
commit a18d73d76d
1 changed files with 5 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/05_quotation/QuotationCard.vue
View file

@ -4,6 +4,7 @@ import { formatNumberDecimal } from 'src/stores/utils';
import BadgeComponent from 'components/BadgeComponent.vue'; import BadgeComponent from 'components/BadgeComponent.vue';
import KebabAction from '../shared/KebabAction.vue'; import KebabAction from '../shared/KebabAction.vue';
import MainButton from '../button/MainButton.vue'; import MainButton from '../button/MainButton.vue';
import { onMounted } from 'vue';
defineProps<{ defineProps<{
title?: string; title?: string;
@ -29,11 +30,14 @@ defineEmits<{
(e: 'example'): void; (e: 'example'): void;
(e: 'preview'): void; (e: 'preview'): void;
}>(); }>();
const rand = Math.random() * 2;
</script> </script>
<template> <template>
<div <div
class="surface-1 rounded q-pa-sm quo-card bordered" class="surface-1 rounded q-pa-sm quo-card bordered"
:class="{ 'urgent-card': urgent }" :class="{ 'urgent-card': urgent }"
:style="{ '--animation-delay': rand + 's' }"
> >
<!-- SEC: header --> <!-- SEC: header -->
<header class="row items-center no-wrap"> <header class="row items-center no-wrap">
@ -194,6 +198,7 @@ span {
background-color: hsla(var(--red-7-hsl) / 0.07) !important; background-color: hsla(var(--red-7-hsl) / 0.07) !important;
border: 0.5px solid var(--red-6) !important; border: 0.5px solid var(--red-6) !important;
animation: status 1s infinite; animation: status 1s infinite;
animation-delay: var(--animation-delay);
.code { .code {
color: var(--red-6); color: var(--red-6);