🎨
This commit is contained in:
		
							parent
							
								
									1b7043fa79
								
							
						
					
					
						commit
						8709574f3d
					
				
					 2 changed files with 21 additions and 5 deletions
				
			
		|  | @ -74,7 +74,7 @@ function onMousedown(evt: Event) { | |||
| } | ||||
| 
 | ||||
| .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); | ||||
| 	transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); | ||||
| 	transform-origin: left top; | ||||
| } | ||||
| 
 | ||||
|  |  | |||
|  | @ -74,8 +74,24 @@ const type = $computed<ModalTypes>(() => { | |||
| 		return props.preferType!; | ||||
| 	} | ||||
| }); | ||||
| let transitionName = $ref(defaultStore.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''); | ||||
| let transitionDuration = $ref(defaultStore.state.animation ? 200 : 0); | ||||
| let transitionName = $computed((() => | ||||
| 	defaultStore.state.animation | ||||
| 		? (type === 'drawer') | ||||
| 			? 'modal-drawer' | ||||
| 			: (type === 'popup') | ||||
| 				? 'modal-popup' | ||||
| 				: 'modal' | ||||
| 		: '' | ||||
| )); | ||||
| let transitionDuration = $computed((() => | ||||
| 	transitionName === 'modal-popup' | ||||
| 		? 100 | ||||
| 		: transitionName === 'modal' | ||||
| 			? 200 | ||||
| 			: transitionName === 'modal-drawer' | ||||
| 				? 200 | ||||
| 				: 0 | ||||
| )); | ||||
| 
 | ||||
| let contentClicking = false; | ||||
| 
 | ||||
|  | @ -308,12 +324,12 @@ defineExpose({ | |||
| 
 | ||||
| .modal-popup-enter-active, .modal-popup-leave-active { | ||||
| 	> .bg { | ||||
| 		transition: opacity 0.2s !important; | ||||
| 		transition: opacity 0.1s !important; | ||||
| 	} | ||||
| 
 | ||||
| 	> .content { | ||||
| 		transform-origin: var(--transformOrigin); | ||||
| 		transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important; | ||||
| 		transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1), transform 0.1s cubic-bezier(0, 0, 0.2, 1) !important; | ||||
| 	} | ||||
| } | ||||
| .modal-popup-enter-from, .modal-popup-leave-to { | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue