feat: delay animation so that it start different

This commit is contained in:
Methapon Metanipat 2024-11-07 16:12:28 +07:00
parent 549ac70413
commit a18d73d76d

View file

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