javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(): remove old animation utility (#19586)

Browse Source 
Use Ionic Animations instead
This commit is contained in:
Liam DeBeasi
2019-10-11 13:47:52 -04:00
committed by GitHub
parent 0d699fb2e4
commit 32b97582cb
60 changed files with 229 additions and 1687 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
core/api.txt
View File

@@ -4,10 +4,10 @@ ion-action-sheet,prop,animated,boolean,true,false,false
ion-action-sheet,prop,backdropDismiss,boolean,true,false,false
ion-action-sheet,prop,buttons,(string | ActionSheetButton)[],[],false,false
ion-action-sheet,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-action-sheet,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-action-sheet,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-action-sheet,prop,header,string | undefined,undefined,false,false
ion-action-sheet,prop,keyboardClose,boolean,true,false,false
ion-action-sheet,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false
ion-action-sheet,prop,subHeader,string | undefined,undefined,false,false
ion-action-sheet,prop,translucent,boolean,false,false,false
@@ -41,11 +41,11 @@ ion-alert,prop,animated,boolean,true,false,false
ion-alert,prop,backdropDismiss,boolean,true,false,false
ion-alert,prop,buttons,(string | AlertButton)[],[],false,false
ion-alert,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-alert,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-alert,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-alert,prop,header,string | undefined,undefined,false,false
ion-alert,prop,inputs,AlertInput[],[],false,false
ion-alert,prop,keyboardClose,boolean,true,false,false
ion-alert,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-alert,prop,message,string | undefined,undefined,false,false
ion-alert,prop,mode,"ios" | "md",undefined,false,false
ion-alert,prop,subHeader,string | undefined,undefined,false,false
@@ -575,9 +575,9 @@ ion-loading,prop,animated,boolean,true,false,false
ion-loading,prop,backdropDismiss,boolean,false,false,false
ion-loading,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-loading,prop,duration,number,0,false,false
ion-loading,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-loading,prop,keyboardClose,boolean,true,false,false
ion-loading,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-loading,prop,message,string | undefined,undefined,false,false
ion-loading,prop,mode,"ios" | "md",undefined,false,false
ion-loading,prop,showBackdrop,boolean,true,false,false
@@ -660,7 +660,7 @@ ion-menu-controller,method,isAnimating,isAnimating() => Promise<boolean>
ion-menu-controller,method,isEnabled,isEnabled(menu?: string | null | undefined) => Promise<boolean>
ion-menu-controller,method,isOpen,isOpen(menu?: string | null | undefined) => Promise<boolean>
ion-menu-controller,method,open,open(menu?: string | null | undefined) => Promise<boolean>
ion-menu-controller,method,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder | ((menu: MenuI) => IonicAnimation)) => Promise<void>
ion-menu-controller,method,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder) => Promise<void>
ion-menu-controller,method,swipeGesture,swipeGesture(enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
ion-menu-controller,method,toggle,toggle(menu?: string | null | undefined) => Promise<boolean>
@@ -674,9 +674,9 @@ ion-modal,prop,backdropDismiss,boolean,true,false,false
ion-modal,prop,component,Function | HTMLElement | null | string,undefined,true,false
ion-modal,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
ion-modal,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-modal,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-modal,prop,keyboardClose,boolean,true,false,false
ion-modal,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-modal,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-modal,prop,mode,"ios" | "md",undefined,false,false
ion-modal,prop,showBackdrop,boolean,true,false,false
ion-modal,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
@@ -707,7 +707,7 @@ ion-modal-controller,method,getTop,getTop() => Promise<HTMLIonModalElement | und
ion-nav,shadow
ion-nav,prop,animated,boolean,true,false,false
ion-nav,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-nav,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-nav,prop,root,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
ion-nav,prop,rootParams,undefined | { [key: string]: any; },undefined,false,false
ion-nav,prop,swipeGesture,boolean | undefined,undefined,false,false
@@ -744,9 +744,9 @@ ion-picker,prop,buttons,PickerButton[],[],false,false
ion-picker,prop,columns,PickerColumn[],[],false,false
ion-picker,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-picker,prop,duration,number,0,false,false
ion-picker,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-picker,prop,keyboardClose,boolean,true,false,false
ion-picker,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-picker,prop,mode,"ios" | "md",undefined,false,false
ion-picker,prop,showBackdrop,boolean,true,false,false
ion-picker,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
@@ -783,10 +783,10 @@ ion-popover,prop,backdropDismiss,boolean,true,false,false
ion-popover,prop,component,Function | HTMLElement | null | string,undefined,true,false
ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
ion-popover,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-popover,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-popover,prop,event,any,undefined,false,false
ion-popover,prop,keyboardClose,boolean,true,false,false
ion-popover,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-popover,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-popover,prop,mode,"ios" | "md",undefined,false,false
ion-popover,prop,showBackdrop,boolean,true,false,false
ion-popover,prop,translucent,boolean,false,false,false
@@ -933,7 +933,7 @@ ion-router-link,css-prop,--color
ion-router-outlet,shadow
ion-router-outlet,prop,animated,boolean,true,false,false
ion-router-outlet,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-router-outlet,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-router-outlet,prop,mode,"ios" | "md",getIonMode(this),false,false
ion-row,shadow
@@ -1203,10 +1203,10 @@ ion-toast,prop,buttons,(string | ToastButton)[] | undefined,undefined,false,fals
ion-toast,prop,color,string | undefined,undefined,false,false
ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-toast,prop,duration,number,0,false,false
ion-toast,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-toast,prop,header,string | undefined,undefined,false,false
ion-toast,prop,keyboardClose,boolean,false,false,false
ion-toast,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-toast,prop,message,string | undefined,undefined,false,false
ion-toast,prop,mode,"ios" | "md",undefined,false,false
ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false

4
core/src/components.d.ts vendored
View File

@@ -25,13 +25,11 @@ import {
HeaderFn,
HeaderHeightFn,
InputChangeEventDetail,
IonicAnimation,
ItemHeightFn,
ItemRenderFn,
ItemReorderEventDetail,
LoadingOptions,
MenuChangeEventDetail,
MenuI,
ModalOptions,
NavComponent,
NavOptions,
@@ -1416,7 +1414,7 @@ export namespace Components {
* @param name The name of the animation to register.
* @param animation The animation function to register.
*/
'registerAnimation': (name: string, animation: AnimationBuilder | ((menu: MenuI) => IonicAnimation)) => Promise<void>;
'registerAnimation': (name: string, animation: AnimationBuilder) => Promise<void>;
/**
* Enable or disable the ability to swipe open the menu.
* @param enable If `true`, the menu swipe gesture should be enabled.

4
core/src/components/action-sheet/animations/ios.enter.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Action Sheet Enter Animation
*/
export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/action-sheet/animations/ios.leave.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Action Sheet Leave Animation
*/
export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/action-sheet/animations/md.enter.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* MD Action Sheet Enter Animation
*/
export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/action-sheet/animations/md.leave.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* MD Action Sheet Leave Animation
*/
export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const mdLeaveAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

26
core/src/components/action-sheet/readme.md
View File

@@ -249,19 +249,19 @@ export default {
## Properties
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the action sheet will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `buttons` | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | `[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the action sheet will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `buttons` | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | `[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
## Events

4
core/src/components/alert/animations/ios.enter.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Alert Enter Animation
*/
export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/alert/animations/ios.leave.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Alert Leave Animation
*/
export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/alert/animations/md.enter.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* Md Alert Enter Animation
*/
export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/alert/animations/md.leave.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* Md Alert Leave Animation
*/
export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const mdLeaveAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

30
core/src/components/alert/readme.md
View File

@@ -1025,21 +1025,21 @@ export default {
## Properties
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the alert will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | `[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the alert is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` |
| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `message` | `message` | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the alert will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | `[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the alert is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` |
| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `message` | `message` | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
## Events

4
core/src/components/loading/animations/ios.enter.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Loading Enter Animation
*/
export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/loading/animations/ios.leave.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Loading Leave Animation
*/
export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/loading/animations/md.enter.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* Md Loading Enter Animation
*/
export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/loading/animations/md.leave.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* Md Loading Leave Animation
*/
export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const mdLeaveAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/loading/readme.md
View File

@@ -177,9 +177,9 @@ export default {
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `message` | `message` | Optional text content to display in the loading indicator. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` |

4
core/src/components/menu-controller/menu-controller.ts
View File

@@ -1,6 +1,6 @@
import { Build, Component, Method } from '@stencil/core';
import { AnimationBuilder, IonicAnimation, MenuI } from '../../interface';
import { AnimationBuilder } from '../../interface';
import { menuController } from '../../utils/menu-controller';
@Component({
@@ -149,7 +149,7 @@ export class MenuController {
* @param animation The animation function to register.
*/
@Method()
async registerAnimation(name: string, animation: AnimationBuilder | ((menu: MenuI) => IonicAnimation)) {
async registerAnimation(name: string, animation: AnimationBuilder) {
return menuController.registerAnimation(name, animation as any);
}
}

2
core/src/components/menu-controller/readme.md
View File

@@ -116,7 +116,7 @@ Type: `Promise<boolean>`
### `registerAnimation(name: string, animation: AnimationBuilder | ((menu: MenuI) => IonicAnimation)) => Promise<void>`
### `registerAnimation(name: string, animation: AnimationBuilder) => Promise<void>`
Registers a new animation that can be used with any `ion-menu` by
passing the name of the animation in its `type` property.

10
core/src/components/menu/menu.tsx
View File

@@ -2,7 +2,7 @@ import { Build, Component, ComponentInterface, Element, Event, EventEmitter, Hos
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import { Gesture, GestureDetail, IonicAnimation, MenuChangeEventDetail, MenuI, Side } from '../../interface';
import { Animation, Gesture, GestureDetail, MenuChangeEventDetail, MenuI, Side } from '../../interface';
import { Point, getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
import { GESTURE_CONTROLLER } from '../../utils/gesture';
import { assert, isEndSide as isEnd } from '../../utils/helpers';
@@ -335,7 +335,7 @@ AFTER:
private async startAnimation(shouldOpen: boolean, animated: boolean): Promise<void> {
const isReversed = !shouldOpen;
const ani = (this.animation as IonicAnimation)!
const ani = (this.animation as Animation)!
.direction((isReversed) ? 'reverse' : 'normal')
.easing((isReversed) ? this.easingReverse : this.easing);
@@ -384,7 +384,7 @@ AFTER:
}
// the cloned animation should not use an easing curve during seek
(this.animation as IonicAnimation)
(this.animation as Animation)
.direction((this._isOpen) ? 'reverse' : 'normal')
.progressStart(true);
}
@@ -539,8 +539,10 @@ AFTER:
assert(this._isOpen, 'menu cannot be closed');
this.isAnimating = true;
const ani = (this.animation as IonicAnimation)!.direction('reverse');
const ani = (this.animation as Animation)!.direction('reverse');
ani.play({ sync: true });
this.afterAnimation(false);
}

4
core/src/components/modal/animations/ios.enter.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Modal Enter Animation
*/
export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/modal/animations/ios.leave.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Modal Leave Animation
*/
export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/modal/animations/md.enter.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* Md Modal Enter Animation
*/
export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/modal/animations/md.leave.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* Md Modal Leave Animation
*/
export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const mdLeaveAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

24
core/src/components/modal/readme.md
View File

@@ -326,18 +326,18 @@ export default {
## Properties
| Property | Attribute | Description | Type | Default |
| ------------------------ | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the modal will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the modal will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `component` _(required)_ | `component` | The component to display inside of the modal. | `Function \| HTMLElement \| null \| string` | `undefined` |
| `componentProps` | -- | The data to pass to the modal component. | `undefined \| { [key: string]: any; }` | `undefined` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the modal is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal. | `boolean` | `true` |
| Property | Attribute | Description | Type | Default |
| ------------------------ | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the modal will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the modal will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `component` _(required)_ | `component` | The component to display inside of the modal. | `Function \| HTMLElement \| null \| string` | `undefined` |
| `componentProps` | -- | The data to pass to the modal component. | `undefined \| { [key: string]: any; }` | `undefined` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the modal is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal. | `boolean` | `true` |
## Events

8
core/src/components/nav/nav.tsx
View File

@@ -2,7 +2,7 @@ import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch, h
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import { Animation, AnimationBuilder, ComponentProps, FrameworkDelegate, Gesture, IonicAnimation, NavComponent, NavOptions, NavOutlet, NavResult, RouteID, RouteWrite, RouterDirection, TransitionDoneFn, TransitionInstruction, ViewController } from '../../interface';
import { Animation, AnimationBuilder, ComponentProps, FrameworkDelegate, Gesture, NavComponent, NavOptions, NavOutlet, NavResult, RouteID, RouteWrite, RouterDirection, TransitionDoneFn, TransitionInstruction, ViewController } from '../../interface';
import { Point, getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
import { assert } from '../../utils/helpers';
import { TransitionOptions, lifecycle, setPageHidden, transition } from '../../utils/transition';
@@ -18,7 +18,7 @@ import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToVie
export class Nav implements NavOutlet {
private transInstr: TransitionInstruction[] = [];
private sbAni?: Animation | IonicAnimation;
private sbAni?: Animation;
private animationEnabled = true;
private useRouter = false;
private isTransitioning = false;
@@ -825,7 +825,7 @@ export class Nav implements NavOutlet {
const opts = ti.opts!;
const progressCallback = opts.progressAnimation
? (ani: IonicAnimation | Animation | undefined) => this.sbAni = ani
? (ani: Animation | undefined) => this.sbAni = ani
: undefined;
const mode = getIonMode(this);
const enteringEl = enteringView.element!;
@@ -986,7 +986,7 @@ export class Nav implements NavOutlet {
newStepValue += getTimeGivenProgression(new Point(0, 0), new Point(0.32, 0.72), new Point(0, 1), new Point(1, 1), stepValue);
}
(this.sbAni as IonicAnimation).progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
(this.sbAni as Animation).progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
}
}

14
core/src/components/nav/readme.md
View File

@@ -10,13 +10,13 @@ Unlike Router Outlet, Nav is not tied to a particular router. This means that if
## Properties
| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the nav should animate the transition of components. | `boolean` | `true` |
| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `root` | `root` | Root NavComponent to load | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` |
| `rootParams` | -- | Any parameters for the root component | `undefined \| { [key: string]: any; }` | `undefined` |
| `swipeGesture` | `swipe-gesture` | If the nav component should allow for swipe-to-go-back. | `boolean \| undefined` | `undefined` |
| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the nav should animate the transition of components. | `boolean` | `true` |
| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `root` | `root` | Root NavComponent to load | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` |
| `rootParams` | -- | Any parameters for the root component | `undefined \| { [key: string]: any; }` | `undefined` |
| `swipeGesture` | `swipe-gesture` | If the nav component should allow for swipe-to-go-back. | `boolean \| undefined` | `undefined` |
## Events

4
core/src/components/picker/animations/ios.enter.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Picker Enter Animation
*/
export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/picker/animations/ios.leave.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Picker Leave Animation
*/
export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

26
core/src/components/picker/readme.md
View File

@@ -9,19 +9,19 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
## Properties
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the picker will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the picker will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `buttons` | -- | Array of buttons to be displayed at the top of the picker. | `PickerButton[]` | `[]` |
| `columns` | -- | Array of columns to be displayed in the picker. | `PickerColumn[]` | `[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the picker is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the picker. | `boolean` | `true` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the picker will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the picker will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `buttons` | -- | Array of buttons to be displayed at the top of the picker. | `PickerButton[]` | `[]` |
| `columns` | -- | Array of columns to be displayed in the picker. | `PickerColumn[]` | `[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the picker is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the picker. | `boolean` | `true` |
## Events

4
core/src/components/popover/animations/ios.enter.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Popover Enter Animation
*/
export const iosEnterAnimation = (baseEl: HTMLElement, ev?: Event): IonicAnimation => {
export const iosEnterAnimation = (baseEl: HTMLElement, ev?: Event): Animation => {
let originY = 'top';
let originX = 'left';

4
core/src/components/popover/animations/ios.leave.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Popover Leave Animation
*/
export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/popover/animations/md.enter.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* Md Popover Enter Animation
*/
export const mdEnterAnimation = (baseEl: HTMLElement, ev?: Event): IonicAnimation => {
export const mdEnterAnimation = (baseEl: HTMLElement, ev?: Event): Animation => {
const POPOVER_MD_BODY_PADDING = 12;
const doc = (baseEl.ownerDocument as any);
const isRTL = doc.dir === 'rtl';

4
core/src/components/popover/animations/md.leave.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* Md Popover Leave Animation
*/
export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
export const mdLeaveAnimation = (baseEl: HTMLElement): Animation => {
const baseAnimation = createAnimation();
const backdropAnimation = createAnimation();
const wrapperAnimation = createAnimation();

28
core/src/components/popover/readme.md
View File

@@ -85,20 +85,20 @@ export const PopoverExample: React.FC = () => {
## Properties
| Property | Attribute | Description | Type | Default |
| ------------------------ | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `component` _(required)_ | `component` | The component to display inside of the popover. | `Function \| HTMLElement \| null \| string` | `undefined` |
| `componentProps` | -- | The data to pass to the popover component. | `undefined \| { [key: string]: any; }` | `undefined` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the popover is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `event` | `event` | The event to pass to the popover animation. | `any` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the popover. | `boolean` | `true` |
| `translucent` | `translucent` | If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
| Property | Attribute | Description | Type | Default |
| ------------------------ | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `component` _(required)_ | `component` | The component to display inside of the popover. | `Function \| HTMLElement \| null \| string` | `undefined` |
| `componentProps` | -- | The data to pass to the popover component. | `undefined \| { [key: string]: any; }` | `undefined` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the popover is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `event` | `event` | The event to pass to the popover animation. | `any` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the popover. | `boolean` | `true` |
| `translucent` | `translucent` | If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
## Events

10
core/src/components/router-outlet/readme.md
View File

@@ -30,11 +30,11 @@ For handling Router Guards, the older `ionViewCanEnter` and `ionViewCanLeave` ha
## Properties
| Property | Attribute | Description | Type | Default |
| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ------------------ |
| `animated` | `animated` | If `true`, the router-outlet should animate the transition of components. | `boolean` | `true` |
| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `getIonMode(this)` |
| Property | Attribute | Description | Type | Default |
| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------ |
| `animated` | `animated` | If `true`, the router-outlet should animate the transition of components. | `boolean` | `true` |
| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `getIonMode(this)` |
----------------------------------------------

6
core/src/components/router-outlet/route-outlet.tsx
View File

@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Pr
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import { Animation, AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Gesture, IonicAnimation, NavOutlet, RouteID, RouteWrite, RouterDirection, RouterOutletOptions, SwipeGestureHandler } from '../../interface';
import { Animation, AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Gesture, NavOutlet, RouteID, RouteWrite, RouterDirection, RouterOutletOptions, SwipeGestureHandler } from '../../interface';
import { Point, getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
import { attachComponent, detachComponent } from '../../utils/framework-delegate';
import { transition } from '../../utils/transition';
@@ -18,7 +18,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
private activeComponent: any;
private waitPromise?: Promise<void>;
private gesture?: Gesture;
private ani?: IonicAnimation | Animation;
private ani?: Animation;
private animationEnabled = true;
@Element() el!: HTMLElement;
@@ -96,7 +96,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
newStepValue += getTimeGivenProgression(new Point(0, 0), new Point(0.32, 0.72), new Point(0, 1), new Point(1, 1), step);
}
(this.ani as IonicAnimation).progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
(this.ani as Animation).progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
}
}

4
core/src/components/toast/animations/ios.enter.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Toast Enter Animation
*/
export const iosEnterAnimation = (baseEl: ShadowRoot, position: string): IonicAnimation => {
export const iosEnterAnimation = (baseEl: ShadowRoot, position: string): Animation => {
const baseAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/toast/animations/ios.leave.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* iOS Toast Leave Animation
*/
export const iosLeaveAnimation = (baseEl: ShadowRoot, position: string): IonicAnimation => {
export const iosLeaveAnimation = (baseEl: ShadowRoot, position: string): Animation => {
const baseAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/toast/animations/md.enter.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* MD Toast Enter Animation
*/
export const mdEnterAnimation = (baseEl: ShadowRoot, position: string): IonicAnimation => {
export const mdEnterAnimation = (baseEl: ShadowRoot, position: string): Animation => {
const baseAnimation = createAnimation();
const wrapperAnimation = createAnimation();

4
core/src/components/toast/animations/md.leave.ts
View File

@@ -1,10 +1,10 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../../utils/animation/animation';
/**
* md Toast Leave Animation
*/
export const mdLeaveAnimation = (baseEl: ShadowRoot): IonicAnimation => {
export const mdLeaveAnimation = (baseEl: ShadowRoot): Animation => {
const baseAnimation = createAnimation();
const wrapperAnimation = createAnimation();

30
core/src/components/toast/readme.md
View File

@@ -165,21 +165,21 @@ export const ToastExample: React.FC = () => {
## Properties
| Property | Attribute | Description | Type | Default |
| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the toast will animate. | `boolean` | `true` |
| `buttons` | -- | An array of buttons for the toast. | `(string \| ToastButton)[] \| undefined` | `undefined` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the toast is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` |
| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `message` | `message` | Message to be shown in the toast. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` |
| `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
| Property | Attribute | Description | Type | Default |
| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the toast will animate. | `boolean` | `true` |
| `buttons` | -- | An array of buttons for the toast. | `(string \| ToastButton)[] \| undefined` | `undefined` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the toast is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` |
| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `message` | `message` | Message to be shown in the toast. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` |
| `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
## Events

3
core/src/interface.d.ts vendored
View File

@@ -31,8 +31,7 @@ export * from './components/toggle/toggle-interface';
export * from './components/virtual-scroll/virtual-scroll-interface';
// Types from utils
export { Animation as IonicAnimation } from './utils/animation/animation-interface';
export * from './utils/animation/old-animation/animation-interface';
export { Animation, AnimationBuilder } from './utils/animation/animation-interface';
export * from './utils/overlays-interface';
export * from './global/config';
export { Gesture, GestureDetail } from './utils/gesture';

2
core/src/utils/animation/animation-interface.ts
View File

@@ -239,3 +239,5 @@ export interface AnimationPlayOptions {
export type AnimationPlayTo = 'start' | 'end';
export type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
export type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';
export type AnimationBuilder = (baseEl: any, opts?: any) => Animation;

64
core/src/utils/animation/old-animation/animation-interface.ts
View File

@@ -1,64 +0,0 @@
export interface AnimationController {
create(animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise<Animation>;
}
export interface Animation {
new (): any;
parent: Animation | undefined;
hasChildren: boolean;
addElement(el: Node | Node[] | NodeList): Animation;
add(childAnimation: Animation): Animation;
duration(milliseconds: number): Animation;
easing(name: string): Animation;
easingReverse(name: string): Animation;
getDuration(opts?: PlayOptions): number;
getEasing(): string;
from(prop: string, val: any): Animation;
to(prop: string, val: any, clearProperyAfterTransition?: boolean): Animation;
fromTo(prop: string, fromVal: any, toVal: any, clearProperyAfterTransition?: boolean): Animation;
beforeAddClass(className: string): Animation;
beforeRemoveClass(className: string): Animation;
beforeStyles(styles: { [property: string]: any; }): Animation;
beforeClearStyles(propertyNames: string[]): Animation;
beforeAddRead(domReadFn: () => void): Animation;
beforeAddWrite(domWriteFn: () => void): Animation;
afterAddClass(className: string): Animation;
afterRemoveClass(className: string): Animation;
afterStyles(styles: { [property: string]: any; }): Animation;
afterClearStyles(propertyNames: string[]): Animation;
play(opts?: PlayOptions): void;
playSync(): void;
playAsync(opts?: PlayOptions): Promise<Animation>;
reverse(shouldReverse?: boolean): Animation;
stop(stepValue?: number): void;
progressStart(): void;
progressStep(stepValue: number): void;
progressEnd(shouldComplete: boolean, currentStepValue: number, dur: number): void;
onFinish(callback: (animation?: Animation) => void, opts?: {oneTimeCallback?: boolean, clearExistingCallbacks?: boolean}): Animation;
destroy(): void;
isRoot(): boolean;
hasCompleted: boolean;
}
export type AnimationBuilder = (Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>;
export interface PlayOptions {
duration?: number;
promise?: boolean;
}
export interface EffectProperty {
effectName: string;
trans: boolean;
wc?: string;
to?: EffectState;
from?: EffectState;
[state: string]: any;
}
export interface EffectState {
val: any;
num: number;
effectUnit: string;
}

1253
core/src/utils/animation/old-animation/animator.ts
View File

File diff suppressed because it is too large Load Diff

10
core/src/utils/animation/old-animation/index.ts
View File

@@ -1,10 +0,0 @@
import { Animation, AnimationBuilder } from '../../../interface';
import { Animator } from './animator';
export const create = (animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise<Animation> => {
if (animationBuilder) {
return animationBuilder(Animator as any, baseEl, opts);
}
return Promise.resolve(new Animator() as any);
};

30
core/src/utils/animation/old-animation/transition-end.ts
View File

@@ -1,30 +0,0 @@
export const transitionEnd = (el: HTMLElement | null, callback: (ev?: TransitionEvent) => void) => {
let unRegTrans: (() => void) | undefined;
const opts: any = { passive: true };
const unregister = () => {
if (unRegTrans) {
unRegTrans();
}
};
const onTransitionEnd = (ev: Event) => {
if (el === ev.target) {
unregister();
callback(ev as TransitionEvent);
}
};
if (el) {
el.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
el.addEventListener('transitionend', onTransitionEnd, opts);
unRegTrans = () => {
el.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
el.removeEventListener('transitionend', onTransitionEnd, opts);
};
}
return unregister;
};

5
core/src/utils/animation/test/animationbuilder/e2e.ts
View File

@@ -1,10 +1,5 @@
import { E2EPage, newE2EPage } from '@stencil/core/testing';
test('animation:backwards-compatibility animationbuilder', async () => {
const page = await newE2EPage({ url: '/src/utils/animation/test/animationbuilder?_forceAnimationBuilder=true' });
await testNavigation(page);
});
test('animation:backwards-compatibility animation', async () => {
const page = await newE2EPage({ url: '/src/utils/animation/test/animationbuilder' });
await testNavigation(page);

59
core/src/utils/animation/test/animationbuilder/index.html
View File

@@ -101,65 +101,6 @@
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
const forceAnimationBuilder = new URLSearchParams(window.location.search).get('ionic:_forceAnimationBuilder');
if (forceAnimationBuilder) {
window.Ionic.config.navAnimation = (AnimationC, navEl, opts) => {
const TRANSLATEY = 'translateY';
const OFF_BOTTOM = '40px';
const CENTER = '0px';
const backDirection = (opts.direction === 'back');
const enteringEl = opts.enteringEl;
const leavingEl = opts.leavingEl;
const ionPageElement = getIonPageElement(enteringEl);
const enteringToolbarEle = ionPageElement.querySelector('ion-toolbar');
const rootTransition = new AnimationC();
rootTransition
.addElement(ionPageElement)
.beforeRemoveClass('ion-page-invisible');
// animate the component itself
if (backDirection) {
rootTransition
.duration(opts.duration || 200)
.easing('cubic-bezier(0.47,0,0.745,0.715)');
} else {
rootTransition
.duration(opts.duration || 280)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.fromTo(TRANSLATEY, OFF_BOTTOM, CENTER, true)
.fromTo('opacity', 0.01, 1, true);
}
// Animate toolbar if it's there
if (enteringToolbarEle) {
const enteringToolBar = new AnimationC();
enteringToolBar.addElement(enteringToolbarEle);
rootTransition.add(enteringToolBar);
}
// setup leaving view
if (leavingEl && backDirection) {
// leaving content
rootTransition
.duration(opts.duration || 200)
.easing('cubic-bezier(0.47,0,0.745,0.715)');
const leavingPage = new AnimationC();
leavingPage
.addElement(getIonPageElement(leavingEl))
.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM)
.fromTo('opacity', 1, 0);
rootTransition.add(leavingPage);
}
return Promise.resolve(rootTransition);
};
}
const getIonPageElement = (element) => {
if (element.classList.contains('ion-page')) {
return element;

13
core/src/utils/menu-controller/animations/base.ts
View File

@@ -1,4 +1,4 @@
import { IonicAnimation } from '../../../interface';
import { Animation } from '../../../interface';
import { createAnimation } from '../../animation/animation';
/**
@@ -7,13 +7,16 @@ import { createAnimation } from '../../animation/animation';
* type will provide their own animations for open and close
* and registers itself with Menu.
*/
export const baseAnimation = (isIos: boolean): IonicAnimation => {
export const baseAnimation = (isIos: boolean): Animation => {
// https://material.io/guidelines/motion/movement.html#movement-movement-in-out-of-screen-bounds
// https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves
// "Apply the sharp curve to items temporarily leaving the screen that may return
// from the same exit point. When they return, use the deceleration curve. On mobile,
// this transition typically occurs over 300ms" -- MD Motion Guide
/**
* "Apply the sharp curve to items temporarily leaving the screen that may return
* from the same exit point. When they return, use the deceleration curve. On mobile,
* this transition typically occurs over 300ms" -- MD Motion Guide
*/
return createAnimation().duration(isIos ? 400 : 300);
};

4
core/src/utils/menu-controller/animations/overlay.ts
View File

@@ -1,4 +1,4 @@
import { IonicAnimation, MenuI } from '../../../interface';
import { Animation, MenuI } from '../../../interface';
import { createAnimation } from '../../animation/animation';
import { baseAnimation } from './base';
@@ -8,7 +8,7 @@ import { baseAnimation } from './base';
* The menu slides over the content. The content
* itself, which is under the menu, does not move.
*/
export const menuOverlayAnimation = (menu: MenuI): IonicAnimation => {
export const menuOverlayAnimation = (menu: MenuI): Animation => {
let closedX: string;
let openedX: string;
const width = menu.width + 8;

4
core/src/utils/menu-controller/animations/push.ts
View File

@@ -1,4 +1,4 @@
import { IonicAnimation, MenuI } from '../../../interface';
import { Animation, MenuI } from '../../../interface';
import { createAnimation } from '../../animation/animation';
import { baseAnimation } from './base';
@@ -8,7 +8,7 @@ import { baseAnimation } from './base';
* The content slides over to reveal the menu underneath.
* The menu itself also slides over to reveal its bad self.
*/
export const menuPushAnimation = (menu: MenuI): IonicAnimation => {
export const menuPushAnimation = (menu: MenuI): Animation => {
let contentOpenedX: string;
let menuClosedX: string;

4
core/src/utils/menu-controller/animations/reveal.ts
View File

@@ -1,4 +1,4 @@
import { IonicAnimation, MenuI } from '../../../interface';
import { Animation, MenuI } from '../../../interface';
import { createAnimation } from '../../animation/animation';
import { baseAnimation } from './base';
@@ -8,7 +8,7 @@ import { baseAnimation } from './base';
* The content slides over to reveal the menu underneath.
* The menu itself, which is under the content, does not move.
*/
export const menuRevealAnimation = (menu: MenuI): IonicAnimation => {
export const menuRevealAnimation = (menu: MenuI): Animation => {
const openedX = (menu.width * (menu.isEndSide ? -1 : 1)) + 'px';
const contentOpen = createAnimation()

6
core/src/utils/menu-controller/index.ts
View File

@@ -1,11 +1,11 @@
import { AnimationBuilder, IonicAnimation, MenuI } from '../../interface';
import { AnimationBuilder, MenuI } from '../../interface';
import { menuOverlayAnimation } from './animations/overlay';
import { menuPushAnimation } from './animations/push';
import { menuRevealAnimation } from './animations/reveal';
const createMenuController = () => {
const menuAnimations = new Map<string, ((menu: MenuI) => IonicAnimation) | AnimationBuilder>();
const menuAnimations = new Map<string, AnimationBuilder>();
const menus: MenuI[] = [];
const open = async (menu?: string | null): Promise<boolean> => {
@@ -122,7 +122,7 @@ const createMenuController = () => {
return isAnimatingSync();
};
const registerAnimation = (name: string, animation: AnimationBuilder | ((menu: MenuI) => IonicAnimation)) => {
const registerAnimation = (name: string, animation: AnimationBuilder) => {
menuAnimations.set(name, animation);
};

4
core/src/utils/overlays-interface.ts
View File

@@ -1,7 +1,7 @@
import { EventEmitter } from '@stencil/core';
import { HTMLStencilElement } from '@stencil/core/internal';
import { Animation, AnimationBuilder, IonicAnimation, Mode } from '../interface';
import { Animation, AnimationBuilder, Mode } from '../interface';
export interface OverlayEventDetail<T = any> {
data?: T;
@@ -15,7 +15,7 @@ export interface OverlayInterface {
keyboardClose: boolean;
overlayIndex: number;
presented: boolean;
animation?: Animation | IonicAnimation;
animation?: Animation;
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;

41
core/src/utils/overlays.ts
View File

@@ -1,8 +1,5 @@
import { config } from '../global/config';
import { ActionSheetOptions, AlertOptions, AnimationBuilder, BackButtonEvent, HTMLIonOverlayElement, IonicAnimation, IonicConfig, LoadingOptions, ModalOptions, OverlayInterface, PickerOptions, PopoverOptions, ToastOptions } from '../interface';
// TODO: Remove when removing AnimationBuilder
export type IonicAnimationInterface = (baseEl: any, opts: any) => IonicAnimation;
import { ActionSheetOptions, AlertOptions, AnimationBuilder, BackButtonEvent, HTMLIonOverlayElement, IonicConfig, LoadingOptions, ModalOptions, OverlayInterface, PickerOptions, PopoverOptions, ToastOptions } from '../interface';
let lastId = 0;
@@ -117,8 +114,8 @@ export const getOverlay = (doc: Document, overlayTag?: string, id?: string): HTM
export const present = async (
overlay: OverlayInterface,
name: keyof IonicConfig,
iosEnterAnimation: AnimationBuilder | IonicAnimationInterface,
mdEnterAnimation: AnimationBuilder | IonicAnimationInterface,
iosEnterAnimation: AnimationBuilder,
mdEnterAnimation: AnimationBuilder,
opts?: any
) => {
if (overlay.presented) {
@@ -143,8 +140,8 @@ export const dismiss = async (
data: any | undefined,
role: string | undefined,
name: keyof IonicConfig,
iosLeaveAnimation: AnimationBuilder | IonicAnimationInterface,
mdLeaveAnimation: AnimationBuilder | IonicAnimationInterface,
iosLeaveAnimation: AnimationBuilder,
mdLeaveAnimation: AnimationBuilder,
opts?: any
): Promise<boolean> => {
if (!overlay.presented) {
@@ -176,7 +173,7 @@ const getAppRoot = (doc: Document) => {
const overlayAnimation = async (
overlay: OverlayInterface,
animationBuilder: AnimationBuilder | IonicAnimationInterface,
animationBuilder: AnimationBuilder,
baseEl: any,
opts: any
): Promise<boolean> => {
@@ -190,24 +187,13 @@ const overlayAnimation = async (
const aniRoot = baseEl.shadowRoot || overlay.el;
/**
* TODO: Remove AnimationBuilder
*/
let animation;
let isAnimationBuilder = true;
try {
const mod = await import('./animation/old-animation');
animation = await mod.create(animationBuilder as AnimationBuilder, aniRoot, opts);
} catch (err) {
animation = (animationBuilder as IonicAnimationInterface)(aniRoot, opts);
animation.fill('both');
isAnimationBuilder = false;
}
const animation = animationBuilder(aniRoot, opts);
overlay.animation = animation;
if (!overlay.animated || !config.getBoolean('animated', true)) {
animation.duration(0);
}
if (overlay.keyboardClose) {
animation.beforeAddWrite(() => {
const activeElement = baseEl.ownerDocument!.activeElement as HTMLElement;
@@ -216,18 +202,11 @@ const overlayAnimation = async (
}
});
}
const animationResult = await animation.play();
/**
* TODO: Remove AnimationBuilder
*/
const hasCompleted = (typeof animationResult as any === 'undefined') ? true : (animation as any).hasCompleted;
if (isAnimationBuilder) {
animation.destroy();
}
await animation.play();
overlay.animation = undefined;
return hasCompleted;
return true;
};
export const eventMethod = <T>(element: HTMLElement, eventName: string): Promise<T> => {

36
core/src/utils/transition/index.ts
View File

@@ -1,17 +1,11 @@
import { writeTask } from '@stencil/core';
import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '../../components/nav/constants';
import { Animation, AnimationBuilder, IonicAnimation, NavDirection, NavOptions } from '../../interface';
import { Animation, AnimationBuilder, NavDirection, NavOptions } from '../../interface';
const iosTransitionAnimation = () => import('./ios.transition');
const mdTransitionAnimation = () => import('./md.transition');
// TODO: Remove when removing AnimationBuilder
export type IonicAnimationInterface = (
((navEl: HTMLElement, opts: TransitionOptions) => IonicAnimation) |
((navEl: HTMLElement, opts: TransitionOptions) => Promise<IonicAnimation>)
);
export const transition = (opts: TransitionOptions): Promise<TransitionResult> => {
return new Promise((resolve, reject) => {
writeTask(() => {
@@ -66,7 +60,7 @@ const afterTransition = (opts: TransitionOptions) => {
}
};
const getAnimationBuilder = async (opts: TransitionOptions): Promise<IonicAnimationInterface | AnimationBuilder | undefined> => {
const getAnimationBuilder = async (opts: TransitionOptions): Promise<AnimationBuilder | undefined> => {
if (!opts.leavingEl || !opts.animated || opts.duration === 0) {
return undefined;
}
@@ -82,17 +76,10 @@ const getAnimationBuilder = async (opts: TransitionOptions): Promise<IonicAnimat
return getAnimation;
};
const animation = async (animationBuilder: IonicAnimationInterface | AnimationBuilder, opts: TransitionOptions): Promise<TransitionResult> => {
const animation = async (animationBuilder: AnimationBuilder, opts: TransitionOptions): Promise<TransitionResult> => {
await waitForReady(opts, true);
let trans: Animation | IonicAnimation;
try {
const mod = await import('../animation/old-animation');
trans = await mod.create(animationBuilder as AnimationBuilder, opts.baseEl, opts);
} catch (err) {
trans = (animationBuilder as IonicAnimationInterface)(opts.baseEl, opts) as IonicAnimation;
}
const trans = animationBuilder(opts.baseEl, opts);
fireWillEvents(opts.enteringEl, opts.leavingEl);
@@ -146,18 +133,11 @@ const notifyViewReady = async (viewIsReady: undefined | ((enteringEl: HTMLElemen
}
};
const playTransition = (trans: IonicAnimation | Animation, opts: TransitionOptions): Promise<boolean> => {
const playTransition = (trans: Animation, opts: TransitionOptions): Promise<boolean> => {
const progressCallback = opts.progressCallback;
// TODO: Remove AnimationBuilder
const promise = new Promise<boolean>(resolve => {
trans.onFinish((currentStep: any) => {
if (typeof currentStep === 'number') {
resolve(currentStep === 1);
} else if ((trans as any).hasCompleted !== undefined) {
resolve((trans as Animation).hasCompleted);
}
});
trans.onFinish((currentStep: any) => resolve(currentStep === 1));
});
// cool, let's do this, start the transition
@@ -244,7 +224,7 @@ const setZIndex = (
};
export interface TransitionOptions extends NavOptions {
progressCallback?: ((ani: IonicAnimation | Animation | undefined) => void);
progressCallback?: ((ani: Animation | undefined) => void);
baseEl: any;
enteringEl: HTMLElement;
leavingEl: HTMLElement | undefined;
@@ -252,5 +232,5 @@ export interface TransitionOptions extends NavOptions {
export interface TransitionResult {
hasCompleted: boolean;
animation?: Animation | IonicAnimation;
animation?: Animation;
}

10
core/src/utils/transition/ios.transition.ts
View File

@@ -1,4 +1,4 @@
import { IonicAnimation } from '../../interface';
import { Animation } from '../../interface';
import { createAnimation } from '../animation/animation';
import { TransitionOptions } from '../transition';
@@ -36,7 +36,7 @@ const getBackButton = (refEl: any, backDirection: boolean) => {
return null;
};
const createLargeTitleTransition = (rootAnimation: IonicAnimation, rtl: boolean, backDirection: boolean, enteringEl: any, leavingEl: any) => {
const createLargeTitleTransition = (rootAnimation: Animation, rtl: boolean, backDirection: boolean, enteringEl: any, leavingEl: any) => {
const enteringBackButton = getBackButton(enteringEl, backDirection);
const leavingLargeTitle = getLargeTitle(leavingEl);
@@ -60,7 +60,7 @@ const createLargeTitleTransition = (rootAnimation: IonicAnimation, rtl: boolean,
};
};
const animateBackButton = (rootAnimation: IonicAnimation, rtl: boolean, backDirection: boolean, backButtonEl: any) => {
const animateBackButton = (rootAnimation: Animation, rtl: boolean, backDirection: boolean, backButtonEl: any) => {
const backButtonBounds = backButtonEl.getBoundingClientRect();
const BACK_BUTTON_START_OFFSET = (rtl) ? `calc(100% - ${backButtonBounds.right + 4}px)` : `${backButtonBounds.left - 4}px`;
const START_TEXT_TRANSLATE = (rtl) ? '7px' : '-7px';
@@ -137,7 +137,7 @@ const animateBackButton = (rootAnimation: IonicAnimation, rtl: boolean, backDire
rootAnimation.addAnimation([enteringBackButtonTextAnimation, enteringBackButtonIconAnimation]);
};
const animateLargeTitle = (rootAnimation: IonicAnimation, rtl: boolean, backDirection: boolean, largeTitleEl: any) => {
const animateLargeTitle = (rootAnimation: Animation, rtl: boolean, backDirection: boolean, largeTitleEl: any) => {
const largeTitleBounds = largeTitleEl.getBoundingClientRect();
const TITLE_START_OFFSET = (rtl) ? `calc(100% - ${largeTitleBounds.right}px)` : `${largeTitleBounds.left}px`;
const START_TRANSLATE = (rtl) ? '-18px' : '18px';
@@ -184,7 +184,7 @@ const animateLargeTitle = (rootAnimation: IonicAnimation, rtl: boolean, backDire
rootAnimation.addAnimation(clonedLargeTitleAnimation);
};
export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptions): IonicAnimation => {
export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptions): Animation => {
try {
const EASING = 'cubic-bezier(0.32,0.72,0,1)';
const OPACITY = 'opacity';

4
core/src/utils/transition/md.transition.ts
View File

@@ -1,8 +1,8 @@
import { IonicAnimation } from '../../interface';
import { Animation } from '../../interface';
import { createAnimation } from '../animation/animation';
import { TransitionOptions } from '../transition';
export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions): IonicAnimation => {
export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions): Animation => {
const OFF_BOTTOM = '40px';
const CENTER = '0px';