🎨
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 { | .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; | 	transform-origin: left top; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -74,8 +74,24 @@ const type = $computed<ModalTypes>(() => { | ||||||
| 		return props.preferType!; | 		return props.preferType!; | ||||||
| 	} | 	} | ||||||
| }); | }); | ||||||
| let transitionName = $ref(defaultStore.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''); | let transitionName = $computed((() => | ||||||
| let transitionDuration = $ref(defaultStore.state.animation ? 200 : 0); | 	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; | let contentClicking = false; | ||||||
| 
 | 
 | ||||||
|  | @ -308,12 +324,12 @@ defineExpose({ | ||||||
| 
 | 
 | ||||||
| .modal-popup-enter-active, .modal-popup-leave-active { | .modal-popup-enter-active, .modal-popup-leave-active { | ||||||
| 	> .bg { | 	> .bg { | ||||||
| 		transition: opacity 0.2s !important; | 		transition: opacity 0.1s !important; | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	> .content { | 	> .content { | ||||||
| 		transform-origin: var(--transformOrigin); | 		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 { | .modal-popup-enter-from, .modal-popup-leave-to { | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue