diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2020-10-25 23:22:27 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2020-10-25 23:22:27 +0900 |
| commit | e0938e5e3a574c1c6804e41c46bc4533b166b958 (patch) | |
| tree | c52b1f74dc02c6bc1fe56475b6c7b20568479a14 /src/client/components/ui | |
| parent | APIコンソール (diff) | |
| download | sharkey-e0938e5e3a574c1c6804e41c46bc4533b166b958.tar.gz sharkey-e0938e5e3a574c1c6804e41c46bc4533b166b958.tar.bz2 sharkey-e0938e5e3a574c1c6804e41c46bc4533b166b958.zip | |
Add animation of context menu
Diffstat (limited to 'src/client/components/ui')
| -rw-r--r-- | src/client/components/ui/context-menu.vue | 18 |
1 files 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> |