diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-01-08 16:17:42 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-01-08 16:17:42 +0900 |
| commit | 7c2d2676f77310c3a4269c532f5e1d17262a5608 (patch) | |
| tree | 8486100cd2d0ee5602f7d9495fe00b326371493e /packages/frontend/src/components/MkPlusOneEffect.vue | |
| parent | 13.0.0-beta.30 (diff) | |
| download | misskey-7c2d2676f77310c3a4269c532f5e1d17262a5608.tar.gz misskey-7c2d2676f77310c3a4269c532f5e1d17262a5608.tar.bz2 misskey-7c2d2676f77310c3a4269c532f5e1d17262a5608.zip | |
refactor
Diffstat (limited to 'packages/frontend/src/components/MkPlusOneEffect.vue')
| -rw-r--r-- | packages/frontend/src/components/MkPlusOneEffect.vue | 72 |
1 files changed, 0 insertions, 72 deletions
diff --git a/packages/frontend/src/components/MkPlusOneEffect.vue b/packages/frontend/src/components/MkPlusOneEffect.vue deleted file mode 100644 index af3a6c0e41..0000000000 --- a/packages/frontend/src/components/MkPlusOneEffect.vue +++ /dev/null @@ -1,72 +0,0 @@ -<template> -<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }"> - <span class="text" :class="{ up }"> - <MkReactionIcon class="icon" :reaction="reaction"/> - </span> -</div> -</template> - -<script lang="ts" setup> -import { onMounted } from 'vue'; -import * as os from '@/os'; -import MkReactionIcon from '@/components/MkReactionIcon.vue'; - -const props = withDefaults(defineProps<{ - reaction: string; - x: number; - y: number; -}>(), { -}); - -const emit = defineEmits<{ - (ev: 'end'): void; -}>(); - -let up = $ref(false); -const zIndex = os.claimZIndex('veryLow'); -const angle = (90 - (Math.random() * 180)) + 'deg'; - -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); - will-change: opacity, transform; - - &.up { - opacity: 0; - transform: translateY(-50px) rotateZ(v-bind(angle)); - } - } - } -} -</style> |