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 {
createAnimation,
IonButton,
IonButtons,
IonContent,
IonHeader,
IonItem,
IonLabel,
IonList,
@ -15,6 +13,7 @@ import {
} from '@ionic/react';
import React, { useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { enterAnimation, leaveAnimation } from '../../lib/animation';
import { mapActions, MapState } from '../../store/map';
import { tileProviders } from './tile';
@ -36,30 +35,6 @@ const TileServerChooserDialog: React.FC<{}> = () => {
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 (
<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 {
createAnimation,
IonButton,
IonButtons,
IonContent,
@ -25,6 +24,7 @@ import {
stopBackgroundGeolocation,
} from '../../lib/background-geolocation';
import { deleteCurrent, saveCurrent } from '../../db/gpx';
import { enterAnimation, leaveAnimation } from '../../lib/animation';
const GpxRecord: React.FC<{}> = () => {
const db = useDB();
@ -80,30 +80,6 @@ const GpxRecord: React.FC<{}> = () => {
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 (
<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');
};