Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Creating a library for modal animations.

This commit is contained in:
Eric van der Vlist 2022-09-27 22:06:20 +02:00
parent 3235d9ae70
commit 5119354137
3 changed files with 28 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/map/TileServerChooserDialog.tsx
View File

@ -1,9 +1,7 @@
import { import {
createAnimation,
IonButton, IonButton,
IonButtons, IonButtons,
IonContent, IonContent,
IonHeader,
IonItem, IonItem,
IonLabel, IonLabel,
IonList, IonList,
@ -15,6 +13,7 @@ import {
} from '@ionic/react'; } from '@ionic/react';
import React, { useRef } from 'react'; import React, { useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { enterAnimation, leaveAnimation } from '../../lib/animation';
import { mapActions, MapState } from '../../store/map'; import { mapActions, MapState } from '../../store/map';
import { tileProviders } from './tile'; import { tileProviders } from './tile';
@ -36,30 +35,6 @@ const TileServerChooserDialog: React.FC<{}> = () => {
dismiss(); dismiss();
}; };
const enterAnimation = (baseEl: HTMLElement) => {
const root = baseEl.shadowRoot;
const backdropAnimation = createAnimation()
.addElement(root?.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
const wrapperAnimation = createAnimation()
.addElement(root?.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '0', transform: 'scale(0)' },
{ offset: 1, opacity: '0.99', transform: 'scale(1)' },
]);
return createAnimation()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
};
const leaveAnimation = (baseEl: HTMLElement) => {
return enterAnimation(baseEl).direction('reverse');
};
return ( return (
<IonModal <IonModal

26
src/components/map/gpx-record.tsx
View File

@ -4,7 +4,6 @@ import { useDB, useFind } from 'react-pouchdb';
import '../../theme/get-location.css'; import '../../theme/get-location.css';
import { import {
createAnimation,
IonButton, IonButton,
IonButtons, IonButtons,
IonContent, IonContent,
@ -25,6 +24,7 @@ import {
stopBackgroundGeolocation, stopBackgroundGeolocation,
} from '../../lib/background-geolocation'; } from '../../lib/background-geolocation';
import { deleteCurrent, saveCurrent } from '../../db/gpx'; import { deleteCurrent, saveCurrent } from '../../db/gpx';
import { enterAnimation, leaveAnimation } from '../../lib/animation';
const GpxRecord: React.FC<{}> = () => { const GpxRecord: React.FC<{}> = () => {
const db = useDB(); const db = useDB();
@ -80,30 +80,6 @@ const GpxRecord: React.FC<{}> = () => {
pauseRecording(); pauseRecording();
}; };
const enterAnimation = (baseEl: HTMLElement) => {
const root = baseEl.shadowRoot;
const backdropAnimation = createAnimation()
.addElement(root?.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
const wrapperAnimation = createAnimation()
.addElement(root?.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '0', transform: 'scale(0)' },
{ offset: 1, opacity: '0.99', transform: 'scale(1)' },
]);
return createAnimation()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
};
const leaveAnimation = (baseEl: HTMLElement) => {
return enterAnimation(baseEl).direction('reverse');
};
return ( return (
<Fragment> <Fragment>

26
src/lib/animation.ts Normal file
View File

@ -0,0 +1,26 @@
import { createAnimation } from '@ionic/react';
export const enterAnimation = (baseEl: HTMLElement) => {
const root = baseEl.shadowRoot;
const backdropAnimation = createAnimation()
.addElement(root?.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
const wrapperAnimation = createAnimation()
.addElement(root?.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '0', transform: 'scale(0)' },
{ offset: 1, opacity: '0.99', transform: 'scale(1)' },
]);
return createAnimation()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
};
export const leaveAnimation = (baseEl: HTMLElement) => {
return enterAnimation(baseEl).direction('reverse');
};