feat: delay animation so that it start different
This commit is contained in:
parent
549ac70413
commit
a18d73d76d
1 changed files with 5 additions and 0 deletions
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue