|
| 1 | +```ts |
| 2 | +import { Component, ElementRef, ViewChild } from '@angular/core'; |
| 3 | +import { IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone'; |
| 4 | + |
| 5 | +@Component({ |
| 6 | + selector: 'app-example', |
| 7 | + templateUrl: 'example.component.html', |
| 8 | + standalone: true, |
| 9 | + imports: [IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar], |
| 10 | +}) |
| 11 | +export class ExampleComponent { |
| 12 | + @ViewChild('modal', { read: ElementRef }) |
| 13 | + modal!: ElementRef<HTMLIonModalElement>; |
| 14 | + |
| 15 | + private baseOpacity!: number; |
| 16 | + private readonly MAX_OPACITY = 0.8; |
| 17 | + |
| 18 | + onDragStart() { |
| 19 | + const modalEl = this.modal.nativeElement; |
| 20 | + const style = getComputedStyle(modalEl); |
| 21 | + |
| 22 | + // Fetch the current variable value |
| 23 | + this.baseOpacity = parseFloat(style.getPropertyValue('--backdrop-opacity')); |
| 24 | + |
| 25 | + // Ensure transitions are off during the active drag |
| 26 | + modalEl.style.transition = 'none'; |
| 27 | + } |
| 28 | + |
| 29 | + onDragMove(event: any) { |
| 30 | + // `progress` is a value from 1 (top) to 0 (bottom) |
| 31 | + const { progress } = event.detail; |
| 32 | + const modalEl = this.modal.nativeElement; |
| 33 | + const initialBreakpoint = modalEl.initialBreakpoint!; |
| 34 | + let dynamicOpacity: number; |
| 35 | + |
| 36 | + /** |
| 37 | + * Dragging Down: Progress is between 0 and the initial breakpoint |
| 38 | + */ |
| 39 | + if (progress <= initialBreakpoint) { |
| 40 | + /** |
| 41 | + * Calculate how far down the user has dragged from the initial |
| 42 | + * breakpoint as a ratio |
| 43 | + */ |
| 44 | + const downwardProgressRatio = progress / initialBreakpoint; |
| 45 | + /** |
| 46 | + * Multiplying this by `baseOpacity` ensures that as progress hits 0, |
| 47 | + * the opacity also hits 0 without a sudden jump |
| 48 | + */ |
| 49 | + dynamicOpacity = downwardProgressRatio * this.baseOpacity; |
| 50 | + } else { |
| 51 | + /** |
| 52 | + * Dragging Up: Progress is between the initial breakpoint and 1.0 |
| 53 | + */ |
| 54 | + |
| 55 | + /** |
| 56 | + * Calculate how far up the user has dragged from the initial |
| 57 | + * breakpoint as a ratio |
| 58 | + */ |
| 59 | + const distanceFromStart = progress - initialBreakpoint; |
| 60 | + /** |
| 61 | + * Calculate the total available space to drag up from the initial |
| 62 | + * breakpoint to the top (1.0) |
| 63 | + */ |
| 64 | + const range = 1 - initialBreakpoint; |
| 65 | + /** |
| 66 | + * Normalizes that distance into a 0.0 to 1.0 value relative to |
| 67 | + * the available upward space |
| 68 | + */ |
| 69 | + const currentGain = distanceFromStart / range; |
| 70 | + |
| 71 | + // Scale from `baseOpacity` up to `MAX_OPACITY` |
| 72 | + dynamicOpacity = this.baseOpacity + currentGain * (this.MAX_OPACITY - this.baseOpacity); |
| 73 | + } |
| 74 | + |
| 75 | + modalEl.style.setProperty('--backdrop-opacity', dynamicOpacity.toString()); |
| 76 | + } |
| 77 | + |
| 78 | + onDragEnd(event: any) { |
| 79 | + // `currentBreakpoint` tells us which snap point the modal will animate to after the drag ends |
| 80 | + const { currentBreakpoint } = event.detail; |
| 81 | + const modalEl = this.modal.nativeElement; |
| 82 | + |
| 83 | + /** |
| 84 | + * If the modal is snapping to the closed state (0), reset the |
| 85 | + * styles. |
| 86 | + */ |
| 87 | + if (currentBreakpoint === 0) { |
| 88 | + modalEl.style.removeProperty('--backdrop-opacity'); |
| 89 | + return; |
| 90 | + } |
| 91 | + |
| 92 | + // Determine the target opacity for the snap-back animation |
| 93 | + let targetOpacity = this.baseOpacity; |
| 94 | + /** |
| 95 | + * If snapping to the top (1), set opacity to MAX_OPACITY for a nice |
| 96 | + * visual effect. |
| 97 | + */ |
| 98 | + if (currentBreakpoint === 1) { |
| 99 | + targetOpacity = this.MAX_OPACITY; |
| 100 | + } |
| 101 | + |
| 102 | + // Re-enable transition for a smooth snap-back |
| 103 | + modalEl.style.transition = '--backdrop-opacity 0.3s ease'; |
| 104 | + modalEl.style.setProperty('--backdrop-opacity', targetOpacity.toString()); |
| 105 | + } |
| 106 | +} |
| 107 | +``` |
0 commit comments