Add animation of context menu
This commit is contained in:
parent
ec5e6c8443
commit
e0938e5e3a
|
@ -1,7 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
|
<transition :name="$store.state.device.animation ? 'fade' : ''" appear>
|
||||||
<div class="nvlagfpb" @contextmenu.prevent.stop="() => {}">
|
<div class="nvlagfpb" @contextmenu.prevent.stop="() => {}">
|
||||||
<MkMenu :items="items" @close="$emit('closed')" class="_popup _shadow" :align="'left'"/>
|
<MkMenu :items="items" @close="$emit('closed')" class="_popup _shadow" :align="'left'"/>
|
||||||
</div>
|
</div>
|
||||||
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -82,4 +84,14 @@ export default defineComponent({
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 65535;
|
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>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue