egirlskey/packages/frontend/src/components/MkReactionEffect.vue

73 lines
1.3 KiB
Vue
Raw Normal View History

2023-01-01 03:28:30 +00:00
<template>
<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
2023-01-07 08:37:30 +00:00
<span class="text" :class="{ up }">
2023-01-08 05:22:04 +00:00
<MkReactionIcon class="icon" :reaction="reaction"/>
2023-01-07 08:37:30 +00:00
</span>
2023-01-01 03:28:30 +00:00
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import * as os from '@/os';
2023-01-08 05:22:04 +00:00
import MkReactionIcon from '@/components/MkReactionIcon.vue';
2023-01-01 03:28:30 +00:00
const props = withDefaults(defineProps<{
2023-01-07 08:37:30 +00:00
reaction: string;
2023-01-01 03:28:30 +00:00
x: number;
y: number;
}>(), {
});
const emit = defineEmits<{
(ev: 'end'): void;
}>();
let up = $ref(false);
2023-01-08 08:38:33 +00:00
const zIndex = os.claimZIndex('middle');
2023-01-07 08:37:30 +00:00
const angle = (90 - (Math.random() * 180)) + 'deg';
2023-01-01 03:28:30 +00:00
onMounted(() => {
window.setTimeout(() => {
up = true;
}, 10);
window.setTimeout(() => {
emit('end');
}, 1100);
});
</script>
<style lang="scss" module>
.root {
pointer-events: none;
position: fixed;
width: 128px;
height: 128px;
&:global {
> .text {
display: block;
height: 1em;
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
color: var(--accent);
font-size: 18px;
font-weight: bold;
transform: translateY(-30px);
transition: transform 1s cubic-bezier(0,.5,0,1), opacity 1s cubic-bezier(.5,0,1,.5);
2023-01-07 08:37:30 +00:00
will-change: opacity, transform;
2023-01-01 03:28:30 +00:00
&.up {
opacity: 0;
2023-01-07 08:37:30 +00:00
transform: translateY(-50px) rotateZ(v-bind(angle));
2023-01-01 03:28:30 +00:00
}
}
}
}
</style>