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…
	
	Add table
		Add a link
		
	
		Reference in a new issue