rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: mobile popover UX (#2140)

Browse Source
This commit is contained in:
Aman Harwara
2023-01-18 01:00:23 +05:30
committed by GitHub
parent 7af4ecbc3d
commit baf77516fe
33 changed files with 237 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
packages/web/src/javascripts/Constants/AnimationConfigs.ts
View File

@@ -4,90 +4,6 @@ export type AnimationConfig = {
initialStyle?: Partial<CSSStyleDeclaration>
}
export const EnterFromTopAnimation: AnimationConfig = {
keyframes: [
{
opacity: 0,
transform: 'scaleY(0)',
},
{
opacity: 1,
transform: 'scaleY(1)',
},
],
options: {
easing: 'ease-in-out',
duration: 150,
fill: 'forwards',
},
initialStyle: {
transformOrigin: 'top',
},
}
export const EnterFromBelowAnimation: AnimationConfig = {
keyframes: [
{
opacity: 0,
transform: 'scaleY(0)',
},
{
opacity: 1,
transform: 'scaleY(1)',
},
],
options: {
easing: 'ease-in-out',
duration: 150,
fill: 'forwards',
},
initialStyle: {
transformOrigin: 'bottom',
},
}
export const ExitToTopAnimation: AnimationConfig = {
keyframes: [
{
opacity: 1,
transform: 'scaleY(1)',
},
{
opacity: 0,
transform: 'scaleY(0)',
},
],
options: {
easing: 'ease-in-out',
duration: 150,
fill: 'forwards',
},
initialStyle: {
transformOrigin: 'top',
},
}
export const ExitToBelowAnimation: AnimationConfig = {
keyframes: [
{
opacity: 1,
transform: 'scaleY(1)',
},
{
opacity: 0,
transform: 'scaleY(0)',
},
],
options: {
easing: 'ease-in-out',
duration: 150,
fill: 'forwards',
},
initialStyle: {
transformOrigin: 'bottom',
},
}
export const TranslateFromTopAnimation: AnimationConfig = {
keyframes: [
{
@@ -129,3 +45,45 @@ export const TranslateToTopAnimation: AnimationConfig = {
transformOrigin: 'top',
},
}
export const TranslateFromBelowAnimation: AnimationConfig = {
keyframes: [
{
opacity: 0,
transform: 'translateY(100%)',
},
{
opacity: 1,
transform: 'translateY(0)',
},
],
options: {
easing: 'ease-in-out',
duration: 150,
fill: 'forwards',
},
initialStyle: {
transformOrigin: 'bottom',
},
}
export const TranslateToBelowAnimation: AnimationConfig = {
keyframes: [
{
opacity: 1,
transform: 'translateY(0)',
},
{
opacity: 0,
transform: 'translateY(100%)',
},
],
options: {
easing: 'ease-in-out',
duration: 150,
fill: 'forwards',
},
initialStyle: {
transformOrigin: 'bottom',
},
}