@ionic/core
Version:
Base components for Ionic
62 lines (61 loc) • 2.93 kB
JavaScript
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/
import { createAnimation } from "../../../utils/animation/animation";
import { getBackdropValueForSheet } from "../utils";
export const createSheetEnterAnimation = (opts) => {
const { currentBreakpoint, backdropBreakpoint, expandToScroll } = opts;
/**
* If the backdropBreakpoint is undefined, then the backdrop
* should always fade in. If the backdropBreakpoint came before the
* current breakpoint, then the backdrop should be fading in.
*/
const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint;
const initialBackdrop = shouldShowBackdrop ? `calc(var(--backdrop-opacity) * ${currentBreakpoint})` : '0';
const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
if (shouldShowBackdrop) {
backdropAnimation
.beforeStyles({
'pointer-events': 'none',
})
.afterClearStyles(['pointer-events']);
}
const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
{ offset: 0, opacity: 1, transform: 'translateY(100%)' },
{ offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
]);
/**
* This allows the content to be scrollable at any breakpoint.
*/
const contentAnimation = !expandToScroll
? createAnimation('contentAnimation').keyframes([
{ offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
{ offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
])
: undefined;
return { wrapperAnimation, backdropAnimation, contentAnimation };
};
export const createSheetLeaveAnimation = (opts) => {
const { currentBreakpoint, backdropBreakpoint } = opts;
/**
* Backdrop does not always fade in from 0 to 1 if backdropBreakpoint
* is defined, so we need to account for that offset by figuring out
* what the current backdrop value should be.
*/
const backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint, backdropBreakpoint)})`;
const defaultBackdrop = [
{ offset: 0, opacity: backdropValue },
{ offset: 1, opacity: 0 },
];
const customBackdrop = [
{ offset: 0, opacity: backdropValue },
{ offset: backdropBreakpoint, opacity: 0 },
{ offset: 1, opacity: 0 },
];
const backdropAnimation = createAnimation('backdropAnimation').keyframes(backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop);
const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
{ offset: 0, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
{ offset: 1, opacity: 1, transform: `translateY(100%)` },
]);
return { wrapperAnimation, backdropAnimation };
};