forked from FoundKeyGang/FoundKey
Add animation of context menu
This commit is contained in:
parent
ec5e6c8443
commit
e0938e5e3a
1 changed files with 15 additions and 3 deletions
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue