From e0938e5e3a574c1c6804e41c46bc4533b166b958 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sun, 25 Oct 2020 23:22:27 +0900 Subject: [PATCH] Add animation of context menu --- src/client/components/ui/context-menu.vue | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/client/components/ui/context-menu.vue b/src/client/components/ui/context-menu.vue index 1b4d386ebd..e5cb4ddc75 100644 --- a/src/client/components/ui/context-menu.vue +++ b/src/client/components/ui/context-menu.vue @@ -1,7 +1,9 @@ <template> -<div class="nvlagfpb" @contextmenu.prevent.stop="() => {}"> - <MkMenu :items="items" @close="$emit('closed')" class="_popup _shadow" :align="'left'"/> -</div> +<transition :name="$store.state.device.animation ? 'fade' : ''" appear> + <div class="nvlagfpb" @contextmenu.prevent.stop="() => {}"> + <MkMenu :items="items" @close="$emit('closed')" class="_popup _shadow" :align="'left'"/> + </div> +</transition> </template> <script lang="ts"> @@ -82,4 +84,14 @@ export default defineComponent({ position: absolute; z-index: 65535; } + +.fade-enter-active, .fade-leave-active { + transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); + transform-origin: left top; +} + +.fade-enter-from, .fade-leave-to { + opacity: 0; + transform: scale(0.9); +} </style>