javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(): diffenernt animations for different modes

Browse Source
This commit is contained in:
Mike Hartington
2017-11-29 08:58:21 -08:00
committed by GitHub
parent 71f3a73285
commit c56e80d5d2
27 changed files with 531 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
packages/core/src/components.d.ts vendored
View File

@ -65,7 +65,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonActionSheetControllerAttributes extends HTMLAttributes { export interface IonActionSheetControllerAttributes extends HTMLAttributes {
} }
} }
} }
@ -95,7 +95,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonActionSheetAttributes extends HTMLAttributes { export interface IonActionSheetAttributes extends HTMLAttributes {
cssClass?: string, cssClass?: string,
title?: string, title?: string,
subTitle?: string, subTitle?: string,
@ -104,7 +104,7 @@ declare global {
translucent?: boolean, translucent?: boolean,
animate?: boolean, animate?: boolean,
enterAnimation?: AnimationBuilder, enterAnimation?: AnimationBuilder,
exitAnimation?: AnimationBuilder, leaveAnimation?: AnimationBuilder,
actionSheetId?: string actionSheetId?: string
} }
} }
@ -135,7 +135,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonAlertControllerAttributes extends HTMLAttributes { export interface IonAlertControllerAttributes extends HTMLAttributes {
} }
} }
} }
@ -165,7 +165,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonAlertAttributes extends HTMLAttributes { export interface IonAlertAttributes extends HTMLAttributes {
cssClass?: string, cssClass?: string,
title?: string, title?: string,
subTitle?: string, subTitle?: string,
@ -174,10 +174,10 @@ declare global {
inputs?: AlertInput[], inputs?: AlertInput[],
enableBackdropDismiss?: boolean, enableBackdropDismiss?: boolean,
translucent?: boolean, translucent?: boolean,
alertId?: string,
animate?: boolean, animate?: boolean,
enterAnimation?: AnimationBuilder, enterAnimation?: AnimationBuilder,
exitAnimation?: AnimationBuilder, leaveAnimation?: AnimationBuilder
alertId?: string
} }
} }
} }
@ -207,7 +207,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonAnimationControllerAttributes extends HTMLAttributes { export interface IonAnimationControllerAttributes extends HTMLAttributes {
} }
} }
} }
@ -237,7 +237,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonAppAttributes extends HTMLAttributes { export interface IonAppAttributes extends HTMLAttributes {
} }
} }
} }
@ -267,7 +267,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface AppCordovaPageOneAttributes extends HTMLAttributes { export interface AppCordovaPageOneAttributes extends HTMLAttributes {
} }
} }
} }
@ -297,7 +297,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface AppCordovaPageTabsAttributes extends HTMLAttributes { export interface AppCordovaPageTabsAttributes extends HTMLAttributes {
} }
} }
} }
@ -327,7 +327,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface AppCordovaPageThreeAttributes extends HTMLAttributes { export interface AppCordovaPageThreeAttributes extends HTMLAttributes {
} }
} }
} }
@ -357,7 +357,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface AppCordovaPageTwoAttributes extends HTMLAttributes { export interface AppCordovaPageTwoAttributes extends HTMLAttributes {
} }
} }
} }
@ -387,7 +387,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonAvatarAttributes extends HTMLAttributes { export interface IonAvatarAttributes extends HTMLAttributes {
} }
} }
} }
@ -417,7 +417,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonBackdropAttributes extends HTMLAttributes { export interface IonBackdropAttributes extends HTMLAttributes {
} }
} }
} }
@ -447,7 +447,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonBadgeAttributes extends HTMLAttributes { export interface IonBadgeAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md' mode?: 'ios' | 'md'
} }
@ -479,7 +479,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonButtonAttributes extends HTMLAttributes { export interface IonButtonAttributes extends HTMLAttributes {
itemButton?: boolean, itemButton?: boolean,
href?: string, href?: string,
buttonType?: string, buttonType?: string,
@ -520,7 +520,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonButtonsAttributes extends HTMLAttributes { export interface IonButtonsAttributes extends HTMLAttributes {
} }
} }
} }
@ -550,7 +550,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonCardContentAttributes extends HTMLAttributes { export interface IonCardContentAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md' mode?: 'ios' | 'md'
} }
@ -582,7 +582,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonCardHeaderAttributes extends HTMLAttributes { export interface IonCardHeaderAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
translucent?: boolean translucent?: boolean
@ -615,7 +615,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonCardSubtitleAttributes extends HTMLAttributes { export interface IonCardSubtitleAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md' mode?: 'ios' | 'md'
} }
@ -647,7 +647,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonCardTitleAttributes extends HTMLAttributes { export interface IonCardTitleAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md' mode?: 'ios' | 'md'
} }
@ -679,7 +679,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonCardAttributes extends HTMLAttributes { export interface IonCardAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md' mode?: 'ios' | 'md'
} }
@ -711,7 +711,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonCheckboxAttributes extends HTMLAttributes { export interface IonCheckboxAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
name?: string, name?: string,
@ -747,7 +747,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonChipButtonAttributes extends HTMLAttributes { export interface IonChipButtonAttributes extends HTMLAttributes {
href?: string, href?: string,
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
@ -782,7 +782,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonChipAttributes extends HTMLAttributes { export interface IonChipAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md' mode?: 'ios' | 'md'
} }
@ -814,7 +814,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonColAttributes extends HTMLAttributes { export interface IonColAttributes extends HTMLAttributes {
} }
} }
} }
@ -844,7 +844,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonContentAttributes extends HTMLAttributes { export interface IonContentAttributes extends HTMLAttributes {
ionScrollStart?: Function, ionScrollStart?: Function,
ionScroll?: Function, ionScroll?: Function,
ionScrollEnd?: Function, ionScrollEnd?: Function,
@ -878,7 +878,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonDatetimeAttributes extends HTMLAttributes { export interface IonDatetimeAttributes extends HTMLAttributes {
disabled?: boolean, disabled?: boolean,
min?: string, min?: string,
max?: string, max?: string,
@ -927,7 +927,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonFabAttributes extends HTMLAttributes { export interface IonFabAttributes extends HTMLAttributes {
} }
} }
} }
@ -957,7 +957,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonFabListAttributes extends HTMLAttributes { export interface IonFabListAttributes extends HTMLAttributes {
activated?: boolean activated?: boolean
} }
} }
@ -988,7 +988,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonFabButtonAttributes extends HTMLAttributes { export interface IonFabButtonAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
href?: string, href?: string,
@ -1026,7 +1026,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonFooterAttributes extends HTMLAttributes { export interface IonFooterAttributes extends HTMLAttributes {
translucent?: boolean translucent?: boolean
} }
} }
@ -1057,7 +1057,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonGestureControllerAttributes extends HTMLAttributes { export interface IonGestureControllerAttributes extends HTMLAttributes {
} }
} }
} }
@ -1087,7 +1087,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonGestureAttributes extends HTMLAttributes { export interface IonGestureAttributes extends HTMLAttributes {
enabled?: boolean, enabled?: boolean,
attachTo?: ElementRef, attachTo?: ElementRef,
autoBlockAll?: boolean, autoBlockAll?: boolean,
@ -1135,7 +1135,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonGridAttributes extends HTMLAttributes { export interface IonGridAttributes extends HTMLAttributes {
} }
} }
} }
@ -1165,7 +1165,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonHeaderAttributes extends HTMLAttributes { export interface IonHeaderAttributes extends HTMLAttributes {
translucent?: boolean translucent?: boolean
} }
} }
@ -1196,7 +1196,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonInfiniteScrollContentAttributes extends HTMLAttributes { export interface IonInfiniteScrollContentAttributes extends HTMLAttributes {
loadingSpinner?: string, loadingSpinner?: string,
loadingText?: string loadingText?: string
} }
@ -1228,7 +1228,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonInfiniteScrollAttributes extends HTMLAttributes { export interface IonInfiniteScrollAttributes extends HTMLAttributes {
threshold?: string, threshold?: string,
enabled?: boolean, enabled?: boolean,
position?: string position?: string
@ -1261,7 +1261,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonInputAttributes extends HTMLAttributes { export interface IonInputAttributes extends HTMLAttributes {
accept?: string, accept?: string,
autocapitalize?: string, autocapitalize?: string,
autocomplete?: string, autocomplete?: string,
@ -1317,7 +1317,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonItemDividerAttributes extends HTMLAttributes { export interface IonItemDividerAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md' mode?: 'ios' | 'md'
} }
@ -1349,7 +1349,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonItemOptionAttributes extends HTMLAttributes { export interface IonItemOptionAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
href?: string, href?: string,
@ -1383,7 +1383,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonItemOptionsAttributes extends HTMLAttributes { export interface IonItemOptionsAttributes extends HTMLAttributes {
side?: Side side?: Side
} }
} }
@ -1414,7 +1414,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonItemSlidingAttributes extends HTMLAttributes { export interface IonItemSlidingAttributes extends HTMLAttributes {
} }
} }
} }
@ -1444,7 +1444,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonItemAttributes extends HTMLAttributes { export interface IonItemAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
href?: string href?: string
@ -1477,7 +1477,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonKeyboardControllerAttributes extends HTMLAttributes { export interface IonKeyboardControllerAttributes extends HTMLAttributes {
} }
} }
} }
@ -1507,7 +1507,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonLabelAttributes extends HTMLAttributes { export interface IonLabelAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
fixed?: boolean, fixed?: boolean,
@ -1542,7 +1542,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonListHeaderAttributes extends HTMLAttributes { export interface IonListHeaderAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md' mode?: 'ios' | 'md'
} }
@ -1574,7 +1574,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonListAttributes extends HTMLAttributes { export interface IonListAttributes extends HTMLAttributes {
} }
} }
} }
@ -1604,7 +1604,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonLoadingControllerAttributes extends HTMLAttributes { export interface IonLoadingControllerAttributes extends HTMLAttributes {
} }
} }
} }
@ -1634,16 +1634,16 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonLoadingAttributes extends HTMLAttributes { export interface IonLoadingAttributes extends HTMLAttributes {
cssClass?: string, cssClass?: string,
content?: string, content?: string,
dismissOnPageChange?: boolean, dismissOnPageChange?: boolean,
duration?: number, duration?: number,
translucent?: boolean, translucent?: boolean,
enterAnimation?: AnimationBuilder,
exitAnimation?: AnimationBuilder,
loadingId?: string, loadingId?: string,
showBackdrop?: boolean showBackdrop?: boolean,
enterAnimation?: AnimationBuilder,
leaveAnimation?: AnimationBuilder
} }
} }
} }
@ -1673,7 +1673,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonMenuControllerAttributes extends HTMLAttributes { export interface IonMenuControllerAttributes extends HTMLAttributes {
} }
} }
} }
@ -1703,7 +1703,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonMenuAttributes extends HTMLAttributes { export interface IonMenuAttributes extends HTMLAttributes {
content?: string, content?: string,
menuId?: string, menuId?: string,
type?: string, type?: string,
@ -1741,7 +1741,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonModalControllerAttributes extends HTMLAttributes { export interface IonModalControllerAttributes extends HTMLAttributes {
} }
} }
} }
@ -1771,17 +1771,17 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonModalAttributes extends HTMLAttributes { export interface IonModalAttributes extends HTMLAttributes {
mode?: string, mode?: string,
color?: string, color?: string,
component?: string, component?: string,
componentProps?: any, componentProps?: any,
cssClass?: string, cssClass?: string,
enableBackdropDismiss?: boolean, enableBackdropDismiss?: boolean,
enterAnimation?: AnimationBuilder,
exitAnimation?: AnimationBuilder,
modalId?: string, modalId?: string,
showBackdrop?: boolean showBackdrop?: boolean,
enterAnimation?: AnimationBuilder,
leaveAnimation?: AnimationBuilder
} }
} }
} }
@ -1811,7 +1811,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonNavControllerAttributes extends HTMLAttributes { export interface IonNavControllerAttributes extends HTMLAttributes {
delegate?: FrameworkDelegate delegate?: FrameworkDelegate
} }
} }
@ -1842,7 +1842,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface StencilIonNavDelegateAttributes extends HTMLAttributes { export interface StencilIonNavDelegateAttributes extends HTMLAttributes {
} }
} }
} }
@ -1872,7 +1872,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonNavAttributes extends HTMLAttributes { export interface IonNavAttributes extends HTMLAttributes {
mode?: string, mode?: string,
root?: any, root?: any,
delegate?: FrameworkDelegate delegate?: FrameworkDelegate
@ -1905,7 +1905,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonNavbarAttributes extends HTMLAttributes { export interface IonNavbarAttributes extends HTMLAttributes {
hideBackButton?: boolean, hideBackButton?: boolean,
backButtonText?: string, backButtonText?: string,
backButtonIcon?: string, backButtonIcon?: string,
@ -1939,7 +1939,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonNoteAttributes extends HTMLAttributes { export interface IonNoteAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md' mode?: 'ios' | 'md'
} }
@ -1971,7 +1971,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonPageAttributes extends HTMLAttributes { export interface IonPageAttributes extends HTMLAttributes {
} }
} }
} }
@ -2001,7 +2001,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonPickerColumnAttributes extends HTMLAttributes { export interface IonPickerColumnAttributes extends HTMLAttributes {
col?: PickerColumn col?: PickerColumn
} }
} }
@ -2032,7 +2032,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonPickerControllerAttributes extends HTMLAttributes { export interface IonPickerControllerAttributes extends HTMLAttributes {
} }
} }
} }
@ -2062,13 +2062,13 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonPickerAttributes extends HTMLAttributes { export interface IonPickerAttributes extends HTMLAttributes {
cssClass?: string, cssClass?: string,
content?: string, content?: string,
dismissOnPageChange?: boolean, dismissOnPageChange?: boolean,
duration?: number, duration?: number,
enterAnimation?: AnimationBuilder, enterAnimation?: AnimationBuilder,
exitAnimation?: AnimationBuilder, leaveAnimation?: AnimationBuilder,
pickerId?: string, pickerId?: string,
showBackdrop?: boolean, showBackdrop?: boolean,
enableBackdropDismiss?: boolean, enableBackdropDismiss?: boolean,
@ -2103,7 +2103,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonPopoverControllerAttributes extends HTMLAttributes { export interface IonPopoverControllerAttributes extends HTMLAttributes {
} }
} }
} }
@ -2133,7 +2133,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonPopoverAttributes extends HTMLAttributes { export interface IonPopoverAttributes extends HTMLAttributes {
mode?: string, mode?: string,
color?: string, color?: string,
component?: string, component?: string,
@ -2141,7 +2141,7 @@ declare global {
cssClass?: string, cssClass?: string,
enableBackdropDismiss?: boolean, enableBackdropDismiss?: boolean,
enterAnimation?: AnimationBuilder, enterAnimation?: AnimationBuilder,
exitAnimation?: AnimationBuilder, leaveAnimation?: AnimationBuilder,
ev?: Event, ev?: Event,
popoverId?: string, popoverId?: string,
showBackdrop?: boolean, showBackdrop?: boolean,
@ -2175,7 +2175,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonRadioGroupAttributes extends HTMLAttributes { export interface IonRadioGroupAttributes extends HTMLAttributes {
allowEmptySelection?: boolean, allowEmptySelection?: boolean,
disabled?: boolean, disabled?: boolean,
name?: string, name?: string,
@ -2209,7 +2209,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonRadioAttributes extends HTMLAttributes { export interface IonRadioAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
name?: string, name?: string,
@ -2245,7 +2245,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonRangeKnobAttributes extends HTMLAttributes { export interface IonRangeKnobAttributes extends HTMLAttributes {
pressed?: boolean, pressed?: boolean,
pin?: boolean, pin?: boolean,
min?: number, min?: number,
@ -2284,7 +2284,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonRangeAttributes extends HTMLAttributes { export interface IonRangeAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
debounce?: number, debounce?: number,
@ -2325,7 +2325,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonReorderGroupAttributes extends HTMLAttributes { export interface IonReorderGroupAttributes extends HTMLAttributes {
enabled?: boolean enabled?: boolean
} }
} }
@ -2356,7 +2356,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonReorderAttributes extends HTMLAttributes { export interface IonReorderAttributes extends HTMLAttributes {
} }
} }
} }
@ -2386,7 +2386,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonRouteLinkAttributes extends HTMLAttributes { export interface IonRouteLinkAttributes extends HTMLAttributes {
url?: string, url?: string,
router?: any router?: any
} }
@ -2418,7 +2418,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonRouteAttributes extends HTMLAttributes { export interface IonRouteAttributes extends HTMLAttributes {
path?: string, path?: string,
component?: string, component?: string,
props?: any props?: any
@ -2451,7 +2451,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonRouterControllerAttributes extends HTMLAttributes { export interface IonRouterControllerAttributes extends HTMLAttributes {
} }
} }
} }
@ -2481,7 +2481,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonRowAttributes extends HTMLAttributes { export interface IonRowAttributes extends HTMLAttributes {
} }
} }
} }
@ -2511,7 +2511,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonScrollAttributes extends HTMLAttributes { export interface IonScrollAttributes extends HTMLAttributes {
enabled?: boolean, enabled?: boolean,
jsScroll?: boolean, jsScroll?: boolean,
onionScrollStart?: ScrollCallback, onionScrollStart?: ScrollCallback,
@ -2546,7 +2546,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonSearchbarAttributes extends HTMLAttributes { export interface IonSearchbarAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
animated?: boolean, animated?: boolean,
@ -2588,7 +2588,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonSegmentButtonAttributes extends HTMLAttributes { export interface IonSegmentButtonAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
checked?: boolean, checked?: boolean,
@ -2623,7 +2623,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonSegmentAttributes extends HTMLAttributes { export interface IonSegmentAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
disabled?: boolean, disabled?: boolean,
@ -2657,7 +2657,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonSelectOptionAttributes extends HTMLAttributes { export interface IonSelectOptionAttributes extends HTMLAttributes {
disabled?: boolean, disabled?: boolean,
selected?: boolean, selected?: boolean,
value?: string value?: string
@ -2690,7 +2690,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonSelectPopoverAttributes extends HTMLAttributes { export interface IonSelectPopoverAttributes extends HTMLAttributes {
options?: SelectPopoverOption[], options?: SelectPopoverOption[],
value?: string value?: string
} }
@ -2722,7 +2722,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonSelectAttributes extends HTMLAttributes { export interface IonSelectAttributes extends HTMLAttributes {
disabled?: boolean, disabled?: boolean,
cancelText?: string, cancelText?: string,
okText?: string, okText?: string,
@ -2761,7 +2761,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonSkeletonTextAttributes extends HTMLAttributes { export interface IonSkeletonTextAttributes extends HTMLAttributes {
width?: string width?: string
} }
} }
@ -2792,7 +2792,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonSlideAttributes extends HTMLAttributes { export interface IonSlideAttributes extends HTMLAttributes {
} }
} }
} }
@ -2822,7 +2822,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonSlidesAttributes extends HTMLAttributes { export interface IonSlidesAttributes extends HTMLAttributes {
effect?: string, effect?: string,
autoplay?: number, autoplay?: number,
control?: any, control?: any,
@ -2866,7 +2866,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonSpinnerAttributes extends HTMLAttributes { export interface IonSpinnerAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
duration?: number, duration?: number,
@ -2901,7 +2901,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonSplitPaneAttributes extends HTMLAttributes { export interface IonSplitPaneAttributes extends HTMLAttributes {
enabled?: boolean, enabled?: boolean,
when?: string | boolean when?: string | boolean
} }
@ -2933,7 +2933,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonTabButtonAttributes extends HTMLAttributes { export interface IonTabButtonAttributes extends HTMLAttributes {
selected?: boolean, selected?: boolean,
tab?: HTMLIonTabElement tab?: HTMLIonTabElement
} }
@ -2965,7 +2965,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonTabHighlightAttributes extends HTMLAttributes { export interface IonTabHighlightAttributes extends HTMLAttributes {
selectedTab?: HTMLIonTabElement selectedTab?: HTMLIonTabElement
} }
} }
@ -2996,7 +2996,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonTabAttributes extends HTMLAttributes { export interface IonTabAttributes extends HTMLAttributes {
btnId?: string, btnId?: string,
path?: string, path?: string,
title?: string, title?: string,
@ -3036,7 +3036,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonTabbarAttributes extends HTMLAttributes { export interface IonTabbarAttributes extends HTMLAttributes {
placement?: string, placement?: string,
tabs?: HTMLIonTabElement[], tabs?: HTMLIonTabElement[],
selectedTab?: HTMLIonTabElement, selectedTab?: HTMLIonTabElement,
@ -3072,7 +3072,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonTabsAttributes extends HTMLAttributes { export interface IonTabsAttributes extends HTMLAttributes {
name?: string, name?: string,
tabbarHidden?: boolean, tabbarHidden?: boolean,
tabbarLayout?: string, tabbarLayout?: string,
@ -3108,7 +3108,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface PageTabAttributes extends HTMLAttributes { export interface PageTabAttributes extends HTMLAttributes {
} }
} }
} }
@ -3138,7 +3138,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface TranslucentPageTabAttributes extends HTMLAttributes { export interface TranslucentPageTabAttributes extends HTMLAttributes {
} }
} }
} }
@ -3168,7 +3168,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonTextareaAttributes extends HTMLAttributes { export interface IonTextareaAttributes extends HTMLAttributes {
autocapitalize?: string, autocapitalize?: string,
autocomplete?: string, autocomplete?: string,
autofocus?: boolean, autofocus?: boolean,
@ -3214,7 +3214,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonThumbnailAttributes extends HTMLAttributes { export interface IonThumbnailAttributes extends HTMLAttributes {
} }
} }
} }
@ -3244,7 +3244,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonTitleAttributes extends HTMLAttributes { export interface IonTitleAttributes extends HTMLAttributes {
} }
} }
} }
@ -3274,7 +3274,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonToastControllerAttributes extends HTMLAttributes { export interface IonToastControllerAttributes extends HTMLAttributes {
} }
} }
} }
@ -3304,7 +3304,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonToastAttributes extends HTMLAttributes { export interface IonToastAttributes extends HTMLAttributes {
message?: string, message?: string,
cssClass?: string, cssClass?: string,
duration?: number, duration?: number,
@ -3313,9 +3313,9 @@ declare global {
dismissOnPageChange?: boolean, dismissOnPageChange?: boolean,
position?: string, position?: string,
translucent?: boolean, translucent?: boolean,
toastId?: string,
enterAnimation?: AnimationBuilder, enterAnimation?: AnimationBuilder,
exitAnimation?: AnimationBuilder, leaveAnimation?: AnimationBuilder
toastId?: string
} }
} }
} }
@ -3345,7 +3345,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonToggleAttributes extends HTMLAttributes { export interface IonToggleAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
name?: string, name?: string,
@ -3381,7 +3381,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonToolbarAttributes extends HTMLAttributes { export interface IonToolbarAttributes extends HTMLAttributes {
color?: string, color?: string,
mode?: 'ios' | 'md', mode?: 'ios' | 'md',
translucent?: boolean translucent?: boolean
@ -3414,7 +3414,7 @@ declare global {
} }
namespace JSXElements { namespace JSXElements {
export interface IonUtilsAttributes extends HTMLAttributes { export interface IonUtilsAttributes extends HTMLAttributes {
} }
} }
} }

27
packages/core/src/components/action-sheet/action-sheet.tsx
View File

@ -7,6 +7,9 @@ import { createThemedClasses } from '../../utils/theme';
import iOSEnterAnimation from './animations/ios.enter'; import iOSEnterAnimation from './animations/ios.enter';
import iOSLeaveAnimation from './animations/ios.leave'; import iOSLeaveAnimation from './animations/ios.leave';
import MdEnterAnimation from './animations/md.enter';
import MdLeaveAnimation from './animations/md.leave';
@Component({ @Component({
tag: 'ion-action-sheet', tag: 'ion-action-sheet',
styleUrls: { styleUrls: {
@ -67,9 +70,9 @@ export class ActionSheet {
@Prop() animate: boolean = true; @Prop() animate: boolean = true;
@Prop() enterAnimation: AnimationBuilder; @Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder; @Prop() leaveAnimation: AnimationBuilder;
@Prop() actionSheetId: string;
@Prop() actionSheetId: string;
@Method() @Method()
present() { present() {
@ -80,13 +83,7 @@ export class ActionSheet {
this.ionActionSheetWillPresent.emit(); this.ionActionSheetWillPresent.emit();
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.enterAnimation; const animationBuilder = this.enterAnimation || this.config.get('actionSheetEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
animationBuilder = iOSEnterAnimation;
}
// build the animation and kick it off // build the animation and kick it off
this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@ -110,14 +107,8 @@ export class ActionSheet {
this.animation = null; this.animation = null;
} }
this.ionActionSheetWillDismiss.emit(); this.ionActionSheetWillDismiss.emit();
const animationBuilder = this.leaveAnimation || this.config.get('actionSheetLeave', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
// get the user's animation fn if one was provided
let animationBuilder = this.exitAnimation;
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
animationBuilder = iOSLeaveAnimation;
}
return this.animationCtrl.create(animationBuilder, this.el).then(animation => { return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
this.animation = animation; this.animation = animation;
@ -295,5 +286,7 @@ export interface ActionSheetDismissEvent extends OverlayDismissEvent {
export { export {
iOSEnterAnimation as ActionSheetiOSEnterAnimation, iOSEnterAnimation as ActionSheetiOSEnterAnimation,
iOSLeaveAnimation as ActionSheetiOSLeaveAnimation iOSLeaveAnimation as ActionSheetiOSLeaveAnimation,
MdEnterAnimation as ActionSheetMDEnterAnimation,
MdLeaveAnimation as ActionSheetMDLeaveAnimation,
}; };

25
packages/core/src/components/action-sheet/animations/md.enter.ts Normal file
View File

@ -0,0 +1,25 @@
import { Animation } from '../../../index';
/**
* MD Action Sheet Enter Animation
*/
export default function MdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.26);
wrapperAnimation.fromTo('translateY', '100%', '0%');
return baseAnimation
.addElement(baseElm)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(400)
.add(backdropAnimation)
.add(wrapperAnimation);
}

27
packages/core/src/components/action-sheet/animations/md.leave.ts Normal file
View File

@ -0,0 +1,27 @@
import { Animation } from '../../../index';
/**
* MD Action Sheet Leave Animation
*/
export default function MdLeaveAnimation(
Animation: Animation,
baseElm: HTMLElement
): Animation {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
backdropAnimation.fromTo('opacity', 0.26, 0);
wrapperAnimation.fromTo('translateY', '0%', '100%');
return baseAnimation
.addElement(baseElm)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(450)
.add(backdropAnimation)
.add(wrapperAnimation);
}

26
packages/core/src/components/alert/alert.tsx
View File

@ -9,6 +9,9 @@ import { createThemedClasses } from '../../utils/theme';
import iOSEnterAnimation from './animations/ios.enter'; import iOSEnterAnimation from './animations/ios.enter';
import iOSLeaveAnimation from './animations/ios.leave'; import iOSLeaveAnimation from './animations/ios.leave';
import MdEnterAnimation from './animations/md.enter';
import MdLeaveAnimation from './animations/md.leave';
@Component({ @Component({
tag: 'ion-alert', tag: 'ion-alert',
styleUrls: { styleUrls: {
@ -73,10 +76,11 @@ export class Alert {
@Prop() translucent: boolean = false; @Prop() translucent: boolean = false;
@Prop() animate: boolean = true; @Prop() animate: boolean = true;
@Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder;
@Prop() alertId: string; @Prop() alertId: string;
@Prop() enterAnimation: AnimationBuilder;
@Prop() leaveAnimation: AnimationBuilder;
@Method() present() { @Method() present() {
if (this.animation) { if (this.animation) {
this.animation.destroy(); this.animation.destroy();
@ -85,12 +89,7 @@ export class Alert {
this.ionAlertWillPresent.emit(); this.ionAlertWillPresent.emit();
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.enterAnimation; const animationBuilder = this.enterAnimation || this.config.get('alertEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
animationBuilder = iOSEnterAnimation;
}
// build the animation and kick it off // build the animation and kick it off
return this.animationCtrl.create(animationBuilder, this.el).then(animation => { return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@ -123,12 +122,7 @@ export class Alert {
}); });
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.exitAnimation; const animationBuilder = this.leaveAnimation || this.config.get('alertLeave', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation);
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
animationBuilder = iOSLeaveAnimation;
}
return this.animationCtrl.create(animationBuilder, this.el).then(animation => { return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
this.animation = animation; this.animation = animation;
@ -488,5 +482,7 @@ export interface AlertDismissEvent extends OverlayDismissEvent {
export { export {
iOSEnterAnimation as AlertiOSEnterAnimation, iOSEnterAnimation as AlertiOSEnterAnimation,
iOSLeaveAnimation as AlertiOSLeaveAnimation iOSLeaveAnimation as AlertiOSLeaveAnimation,
MdEnterAnimation as AlertMDEnterAnimation,
MdLeaveAnimation as AlertMDLeaveAnimation,
}; };

25
packages/core/src/components/alert/animations/md.enter.ts Normal file
View File

@ -0,0 +1,25 @@
import { Animation } from '../../../index';
/**
* Md Alert Enter Animation
*/
export default function MdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.5);
wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
return baseAnimation
.addElement(baseElm)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)
.add(wrapperAnimation);
}

25
packages/core/src/components/alert/animations/md.leave.ts Normal file
View File

@ -0,0 +1,25 @@
import { Animation } from '../../../index';
/**
* Md Alert Leave Animation
*/
export default function MdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
backdropAnimation.fromTo('opacity', 0.5, 0);
wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
return baseAnimation
.addElement(baseElm)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)
.add(wrapperAnimation);
}

2
packages/core/src/components/app/app.tsx
View File

@ -23,7 +23,7 @@ export class App {
@State() useRouter: boolean = false; @State() useRouter: boolean = false;
@Prop({ context: 'config' }) config: Config; @Prop({ context: 'config' }) config: Config;
componentWillLoad() { componentWillLoad() {
this.modeCode = this.config.get('mode'); this.modeCode = this.config.get('mode');
this.useRouter = this.config.getBoolean('useRouter', false); this.useRouter = this.config.getBoolean('useRouter', false);

2
packages/core/src/components/datetime/test/basic/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Datetime - Basic</title> <title>Datetime - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<script src="/dist/ionic.js"></script> <script src="/dist/ionic.js"></script>
</head> </head>
<body> <body>

6
packages/core/src/components/item-options/item-options.tsx
View File

@ -34,13 +34,13 @@ export class ItemOptions {
this.ionSwipe.emit(value); this.ionSwipe.emit(value);
} }
hostData(){ hostData() {
return { return {
class:{ class: {
'item-options-left': !this.isRightSide(), 'item-options-left': !this.isRightSide(),
'item-options-right': this.isRightSide() 'item-options-right': this.isRightSide()
} }
} };
} }
render() { render() {

28
packages/core/src/components/loading/animations/md.enter.ts Normal file
View File

@ -0,0 +1,28 @@
import { Animation } from '../../../index';
/**
* Md Loading Enter Animation
*/
export default function MdEnterAnimation(
Animation: Animation,
baseElm: HTMLElement
): Animation {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.5);
wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
return baseAnimation
.addElement(baseElm)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)
.add(wrapperAnimation);
}

28
packages/core/src/components/loading/animations/md.leave.ts Normal file
View File

@ -0,0 +1,28 @@
import { Animation } from '../../../index';
/**
* Md Loading Leave Animation
*/
export default function MdLeaveAnimation(
Animation: Animation,
baseElm: HTMLElement
): Animation {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
backdropAnimation.fromTo('opacity', 0.5, 0);
wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
return baseAnimation
.addElement(baseElm)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)
.add(wrapperAnimation);
}

26
packages/core/src/components/loading/loading.tsx
View File

@ -6,6 +6,9 @@ import { createThemedClasses } from '../../utils/theme';
import iOSEnterAnimation from './animations/ios.enter'; import iOSEnterAnimation from './animations/ios.enter';
import iOSLeaveAnimation from './animations/ios.leave'; import iOSLeaveAnimation from './animations/ios.leave';
import MdEnterAnimation from './animations/md.enter';
import MdLeaveAnimation from './animations/md.leave';
@Component({ @Component({
tag: 'ion-loading', tag: 'ion-loading',
styleUrls: { styleUrls: {
@ -65,11 +68,12 @@ export class Loading {
@Prop() dismissOnPageChange: boolean = false; @Prop() dismissOnPageChange: boolean = false;
@Prop() duration: number; @Prop() duration: number;
@Prop() translucent: boolean = false; @Prop() translucent: boolean = false;
@Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder;
@Prop() loadingId: string; @Prop() loadingId: string;
@Prop() showBackdrop: boolean = true; @Prop() showBackdrop: boolean = true;
@Prop() enterAnimation: AnimationBuilder;
@Prop() leaveAnimation: AnimationBuilder;
present() { present() {
return new Promise<void>(resolve => { return new Promise<void>(resolve => {
this._present(resolve); this._present(resolve);
@ -85,13 +89,7 @@ export class Loading {
this.ionLoadingWillPresent.emit({ loading: this }); this.ionLoadingWillPresent.emit({ loading: this });
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.enterAnimation; const animationBuilder = this.enterAnimation || this.config.get('loadingEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
animationBuilder = iOSEnterAnimation;
}
// build the animation and kick it off // build the animation and kick it off
this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@ -118,13 +116,7 @@ export class Loading {
this.ionLoadingWillDismiss.emit({ loading: this }); this.ionLoadingWillDismiss.emit({ loading: this });
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.exitAnimation; const animationBuilder = this.leaveAnimation || this.config.get('loadingLeave', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation);
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
animationBuilder = iOSLeaveAnimation;
}
// build the animation and kick it off // build the animation and kick it off
this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@ -254,4 +246,4 @@ export interface LoadingEvent extends Event {
}; };
} }
export { iOSEnterAnimation, iOSLeaveAnimation }; export { iOSEnterAnimation, iOSLeaveAnimation, MdEnterAnimation, MdLeaveAnimation };

31
packages/core/src/components/modal/animations/md.enter.ts Normal file
View File

@ -0,0 +1,31 @@
import { Animation } from '../../../index';
/**
* Md Modal Enter Animation
*/
export default function MdEnterAnimation(
Animation: Animation,
baseElm: HTMLElement
): Animation {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.modal-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.modal-wrapper'));
wrapperAnimation
.fromTo('opacity', 0.01, 1)
.fromTo('translateY', '40px', '0px');
backdropAnimation.fromTo('opacity', 0.01, 0.4);
return baseAnimation
.addElement(baseElm)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(280)
.beforeAddClass('show-modal')
.add(backdropAnimation)
.add(wrapperAnimation);
}

31
packages/core/src/components/modal/animations/md.leave.ts Normal file
View File

@ -0,0 +1,31 @@
import { Animation } from '../../../index';
/**
* Md Modal Leave Animation
*/
export default function MdLeaveAnimation(
Animation: Animation,
baseElm: HTMLElement
): Animation {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.modal-backdrop'));
const wrapperAnimation = new Animation();
const wrapperElm = baseElm.querySelector('.modal-wrapper');
wrapperAnimation.addElement(wrapperElm);
wrapperAnimation
.fromTo('opacity', 0.99, 0)
.fromTo('translateY', '0px', '40px');
backdropAnimation.fromTo('opacity', 0.4, 0.0);
return baseAnimation
.addElement(baseElm)
.easing('cubic-bezier(0.47,0,0.745,0.715)')
.duration(200)
.add(backdropAnimation)
.add(wrapperAnimation);
}

31
packages/core/src/components/modal/modal.tsx
View File

@ -1,10 +1,12 @@
import { Component, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core'; import { Component, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, AnimationController } from '../../index'; import { Animation, AnimationBuilder, AnimationController, Config } from '../../index';
import { createThemedClasses } from '../../utils/theme'; import { createThemedClasses } from '../../utils/theme';
import iOSEnterAnimation from './animations/ios.enter'; import iOSEnterAnimation from './animations/ios.enter';
import iOSLeaveAnimation from './animations/ios.leave'; import iOSLeaveAnimation from './animations/ios.leave';
import MdEnterAnimation from './animations/md.enter';
import MdLeaveAnimation from './animations/md.leave';
@Component({ @Component({
tag: 'ion-modal', tag: 'ion-modal',
styleUrls: { styleUrls: {
@ -49,17 +51,20 @@ export class Modal {
@Event() ionModalDidUnload: EventEmitter; @Event() ionModalDidUnload: EventEmitter;
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController; @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
@Prop({ context: 'config' }) config: Config;
@Prop() mode: string; @Prop() mode: string;
@Prop() color: string; @Prop() color: string;
@Prop() component: string; @Prop() component: string;
@Prop() componentProps: any = {}; @Prop() componentProps: any = {};
@Prop() cssClass: string; @Prop() cssClass: string;
@Prop() enableBackdropDismiss: boolean = true; @Prop() enableBackdropDismiss: boolean = true;
@Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder;
@Prop() modalId: string; @Prop() modalId: string;
@Prop() showBackdrop: boolean = true; @Prop() showBackdrop: boolean = true;
@Prop() enterAnimation: AnimationBuilder;
@Prop() leaveAnimation: AnimationBuilder;
private animation: Animation; private animation: Animation;
@ -78,14 +83,7 @@ export class Modal {
this.ionModalWillPresent.emit({ modal: this }); this.ionModalWillPresent.emit({ modal: this });
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.enterAnimation; const animationBuilder = this.enterAnimation || this.config.get('modalEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
// TODO!!
animationBuilder = iOSEnterAnimation;
}
// build the animation and kick it off // build the animation and kick it off
this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@ -109,14 +107,7 @@ export class Modal {
this.ionModalWillDismiss.emit({ modal: this }); this.ionModalWillDismiss.emit({ modal: this });
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.exitAnimation; const animationBuilder = this.leaveAnimation || this.config.get('modalExit', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation);
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
// TODO!!
animationBuilder = iOSLeaveAnimation;
}
// build the animation and kick it off // build the animation and kick it off
this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@ -210,4 +201,4 @@ export interface ModalEvent extends Event {
}; };
} }
export { iOSEnterAnimation, iOSLeaveAnimation }; export { iOSEnterAnimation, iOSLeaveAnimation, MdEnterAnimation, MdLeaveAnimation };

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

@ -19,8 +19,8 @@ export default function iOSEnterAnimation(Animation: Animation, baseElm: HTMLEle
return baseAnimation return baseAnimation
.addElement(baseElm) .addElement(baseElm)
.easing('ease-in-out') .easing('cubic-bezier(.36,.66,.04,1)')
.duration(200) .duration(400)
.add(backdropAnimation) .add(backdropAnimation)
.add(wrapperAnimation); .add(wrapperAnimation);
} }

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

@ -19,8 +19,8 @@ export default function iOSLeaveAnimation(Animation: Animation, baseElm: HTMLEle
return baseAnimation return baseAnimation
.addElement(baseElm) .addElement(baseElm)
.easing('ease-in-out') .easing('cubic-bezier(.36,.66,.04,1)')
.duration(200) .duration(400)
.add(backdropAnimation) .add(backdropAnimation)
.add(wrapperAnimation); .add(wrapperAnimation);
} }

18
packages/core/src/components/picker/picker.tsx
View File

@ -61,7 +61,7 @@ export class Picker {
@Prop() dismissOnPageChange: boolean = false; @Prop() dismissOnPageChange: boolean = false;
@Prop() duration: number; @Prop() duration: number;
@Prop() enterAnimation: AnimationBuilder; @Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder; @Prop() leaveAnimation: AnimationBuilder;
@Prop() pickerId: string; @Prop() pickerId: string;
@Prop() showBackdrop: boolean = true; @Prop() showBackdrop: boolean = true;
@Prop() enableBackdropDismiss: boolean = true; @Prop() enableBackdropDismiss: boolean = true;
@ -84,13 +84,7 @@ export class Picker {
this.ionPickerWillPresent.emit({ picker: this }); this.ionPickerWillPresent.emit({ picker: this });
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.enterAnimation; const animationBuilder = this.enterAnimation || this.config.get('pickerEnter', iOSEnterAnimation);
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
animationBuilder = iOSEnterAnimation;
}
// build the animation and kick it off // build the animation and kick it off
this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@ -117,13 +111,7 @@ export class Picker {
this.ionPickerWillDismiss.emit({ picker: this }); this.ionPickerWillDismiss.emit({ picker: this });
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.exitAnimation; const animationBuilder = this.leaveAnimation || this.config.get('pickerLeave', iOSLeaveAnimation);
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
animationBuilder = iOSLeaveAnimation;
}
// build the animation and kick it off // build the animation and kick it off
this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animationCtrl.create(animationBuilder, this.el).then(animation => {

20
packages/core/src/components/popover/animations/md.enter.ts Normal file
View File

@ -0,0 +1,20 @@
import { Animation } from '../../../index';
/**
* Md Popover Enter Animation
*/
export default function MdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
backdropAnimation.fromTo('opacity', 0.01, 0.08);
return baseAnimation
.addElement(baseElm)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(300)
.add(backdropAnimation);
}

24
packages/core/src/components/popover/animations/md.leave.ts Normal file
View File

@ -0,0 +1,24 @@
import { Animation } from '../../../index';
/**
* Md Popover Leave Animation
*/
export default function MdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper'));
wrapperAnimation.fromTo('opacity', 0.99, 0);
backdropAnimation.fromTo('opacity', 0.08, 0);
return baseAnimation
.addElement(baseElm)
.easing('ease')
.duration(500)
.add(backdropAnimation)
.add(wrapperAnimation);
}

20
packages/core/src/components/popover/popover.tsx
View File

@ -5,6 +5,8 @@ import { createThemedClasses } from '../../utils/theme';
import iOSEnterAnimation from './animations/ios.enter'; import iOSEnterAnimation from './animations/ios.enter';
import iOSLeaveAnimation from './animations/ios.leave'; import iOSLeaveAnimation from './animations/ios.leave';
import MdEnterAnimation from './animations/md.enter';
import MdLeaveAnimation from './animations/md.leave';
@Component({ @Component({
tag: 'ion-popover', tag: 'ion-popover',
@ -63,7 +65,7 @@ export class Popover {
@Prop() cssClass: string; @Prop() cssClass: string;
@Prop() enableBackdropDismiss: boolean = true; @Prop() enableBackdropDismiss: boolean = true;
@Prop() enterAnimation: AnimationBuilder; @Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder; @Prop() leaveAnimation: AnimationBuilder;
@Prop() ev: Event; @Prop() ev: Event;
@Prop() popoverId: string; @Prop() popoverId: string;
@Prop() showBackdrop: boolean = true; @Prop() showBackdrop: boolean = true;
@ -205,13 +207,8 @@ export class Popover {
this.ionPopoverWillPresent.emit({ popover: this }); this.ionPopoverWillPresent.emit({ popover: this });
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.enterAnimation; const animationBuilder = this.enterAnimation || this.config.get('popoverEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
animationBuilder = iOSEnterAnimation;
}
// build the animation and kick it off // build the animation and kick it off
this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@ -235,12 +232,7 @@ export class Popover {
this.ionPopoverWillDismiss.emit({ popover: this }); this.ionPopoverWillDismiss.emit({ popover: this });
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.exitAnimation; const animationBuilder = this.leaveAnimation || this.config.get('popoverLeave', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation);
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
animationBuilder = iOSLeaveAnimation;
}
// build the animation and kick it off // build the animation and kick it off
this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@ -361,4 +353,4 @@ export const POPOVER_POSITION_PROPERTIES: any = {
} }
}; };
export { iOSEnterAnimation, iOSLeaveAnimation }; export { iOSEnterAnimation, iOSLeaveAnimation, MdEnterAnimation, MdLeaveAnimation };

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

@ -16,7 +16,7 @@ export default function iOSEnterAnimation(
switch (position) { switch (position) {
case 'top': case 'top':
wrapperAnimation.fromTo('translateY', '-100%', `${10}px`); wrapperAnimation.fromTo('translateY', '-100%', '10px');
break; break;
case 'middle': case 'middle':
let topPosition = Math.floor( let topPosition = Math.floor(
@ -26,7 +26,7 @@ export default function iOSEnterAnimation(
wrapperAnimation.fromTo('opacity', 0.01, 1); wrapperAnimation.fromTo('opacity', 0.01, 1);
break; break;
default: default:
wrapperAnimation.fromTo('translateY', '100%', `${0 - 10}px`); wrapperAnimation.fromTo('translateY', '100%', '-10px');
break; break;
} }
return baseAnimation return baseAnimation

37
packages/core/src/components/toast/animations/md.enter.ts Normal file
View File

@ -0,0 +1,37 @@
import { Animation } from '../../../index';
/**
* MD Toast Enter Animation
*/
export default function MdEnterAnimation(
Animation: Animation,
baseElm: HTMLElement,
position: string
): Animation {
const baseAnimation = new Animation();
const wrapperAnimation = new Animation();
const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
wrapperAnimation.addElement(wrapperEle);
switch (position) {
case 'top':
wrapperAnimation.fromTo('translateY', '-100%', '0%');
break;
case 'middle':
let topPosition = Math.floor(
baseElm.clientHeight / 2 - wrapperEle.clientHeight / 2
);
wrapperEle.style.top = `${topPosition}px`;
wrapperAnimation.fromTo('opacity', 0.01, 1);
break;
default:
wrapperAnimation.fromTo('translateY', '100%', '0%');
break;
}
return baseAnimation
.addElement(baseElm)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(400)
.add(wrapperAnimation);
}

33
packages/core/src/components/toast/animations/md.leave.ts Normal file
View File

@ -0,0 +1,33 @@
import { Animation } from '../../../index';
/**
* iOS Toast Leave Animation
*/
export default function iOSLeaveAnimation(
Animation: Animation,
baseElm: HTMLElement,
position: string
): Animation {
const baseAnimation = new Animation();
const wrapperAnimation = new Animation();
const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
wrapperAnimation.addElement(wrapperEle);
switch (position) {
case 'top':
wrapperAnimation.fromTo('translateY', '0px', '-100%');
break;
case 'middle':
wrapperAnimation.fromTo('opacity', 0.99, 0);
break;
default:
wrapperAnimation.fromTo('translateY', `0px`, '100%');
break;
}
return baseAnimation
.addElement(baseElm)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(300)
.add(wrapperAnimation);
}

25
packages/core/src/components/toast/toast.tsx
View File

@ -6,6 +6,9 @@ import { createThemedClasses } from '../../utils/theme';
import iOSEnterAnimation from './animations/ios.enter'; import iOSEnterAnimation from './animations/ios.enter';
import iOSLeaveAnimation from './animations/ios.leave'; import iOSLeaveAnimation from './animations/ios.leave';
import MdEnterAnimation from './animations/md.enter';
import MdLeaveAnimation from './animations/md.leave';
@Component({ @Component({
tag: 'ion-toast', tag: 'ion-toast',
styleUrls: { styleUrls: {
@ -65,10 +68,11 @@ export class Toast {
@Prop() dismissOnPageChange: boolean; @Prop() dismissOnPageChange: boolean;
@Prop() position: string; @Prop() position: string;
@Prop() translucent: boolean = false; @Prop() translucent: boolean = false;
@Prop() enterAnimation: AnimationBuilder;
@Prop() exitAnimation: AnimationBuilder;
@Prop() toastId: string; @Prop() toastId: string;
@Prop() enterAnimation: AnimationBuilder;
@Prop() leaveAnimation: AnimationBuilder;
present() { present() {
return new Promise<void>(resolve => { return new Promise<void>(resolve => {
this._present(resolve); this._present(resolve);
@ -83,13 +87,7 @@ export class Toast {
this.ionToastWillPresent.emit({ toast: this }); this.ionToastWillPresent.emit({ toast: this });
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.enterAnimation; const animationBuilder = this.enterAnimation || this.config.get('toastEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
animationBuilder = iOSEnterAnimation;
}
// build the animation and kick it off // build the animation and kick it off
this.animationCtrl.create(animationBuilder, this.el, this.position).then(animation => { this.animationCtrl.create(animationBuilder, this.el, this.position).then(animation => {
@ -112,12 +110,7 @@ export class Toast {
this.ionToastWillDismiss.emit({ toast: this }); this.ionToastWillDismiss.emit({ toast: this });
// get the user's animation fn if one was provided // get the user's animation fn if one was provided
let animationBuilder = this.exitAnimation; const animationBuilder = this.leaveAnimation || this.config.get('toastLeave', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation);
if (!animationBuilder) {
// user did not provide a custom animation fn
// decide from the config which animation to use
animationBuilder = iOSLeaveAnimation;
}
// build the animation and kick it off // build the animation and kick it off
this.animationCtrl.create(animationBuilder, this.el, this.position).then(animation => { this.animationCtrl.create(animationBuilder, this.el, this.position).then(animation => {
@ -227,4 +220,4 @@ export interface ToastEvent {
}; };
} }
export { iOSEnterAnimation, iOSLeaveAnimation }; export { iOSEnterAnimation, iOSLeaveAnimation, MdEnterAnimation, MdLeaveAnimation };

20
packages/core/src/index.d.ts vendored
View File

@ -58,7 +58,9 @@ export {
LoadingEvent, LoadingEvent,
LoadingOptions, LoadingOptions,
iOSEnterAnimation as LoadingIOSEnterAnimation, iOSEnterAnimation as LoadingIOSEnterAnimation,
iOSLeaveAnimation as LoadingIOSLeaveAnimation iOSLeaveAnimation as LoadingIOSLeaveAnimation,
MdEnterAnimation as LoadingMDEnterAnimation,
MdLeaveAnimation as LoadingMDLeaveAnimation
} from './components/loading/loading'; } from './components/loading/loading';
export { LoadingController } from './components/loading-controller/loading-controller'; export { LoadingController } from './components/loading-controller/loading-controller';
export { Menu } from './components/menu/menu'; export { Menu } from './components/menu/menu';
@ -73,7 +75,9 @@ export {
ModalOptions, ModalOptions,
ModalEvent, ModalEvent,
iOSEnterAnimation as ModalIOSEnterAnimation, iOSEnterAnimation as ModalIOSEnterAnimation,
iOSLeaveAnimation as ModalIOSLeaveAnimation iOSLeaveAnimation as ModalIOSLeaveAnimation,
MdEnterAnimation as ModalMDEnterAnimation,
MdLeaveAnimation as ModalMDLeaveAnimation
} from './components/modal/modal'; } from './components/modal/modal';
export { ModalController } from './components/modal-controller/modal-controller'; export { ModalController } from './components/modal-controller/modal-controller';
export { Nav } from './components/nav/nav'; export { Nav } from './components/nav/nav';
@ -99,7 +103,9 @@ export {
PopoverEvent, PopoverEvent,
PopoverOptions, PopoverOptions,
iOSEnterAnimation as PopoverIOSEnterAnimation, iOSEnterAnimation as PopoverIOSEnterAnimation,
iOSLeaveAnimation as PopoverIOSLeaveAnimation iOSLeaveAnimation as PopoverIOSLeaveAnimation,
MdEnterAnimation as PopoverMDEnterAnimation,
MdLeaveAnimation as PopoverMDLeaveAnimation
} from './components/popover/popover'; } from './components/popover/popover';
export { PopoverController } from './components/popover-controller/popover-controller'; export { PopoverController } from './components/popover-controller/popover-controller';
export { RadioGroup } from './components/radio-group/radio-group'; export { RadioGroup } from './components/radio-group/radio-group';
@ -136,7 +142,9 @@ export {
ToastEvent, ToastEvent,
ToastOptions, ToastOptions,
iOSEnterAnimation as ToastIOSEnterAnimation, iOSEnterAnimation as ToastIOSEnterAnimation,
iOSLeaveAnimation as ToastIOSLeaveAnimation iOSLeaveAnimation as ToastIOSLeaveAnimation,
MdEnterAnimation as ToastMDEnterAnimation,
MdLeaveAnimation as ToastMDLeaveAnimation
} from './components/toast/toast'; } from './components/toast/toast';
export { ToastController } from './components/toast-controller/toast-controller'; export { ToastController } from './components/toast-controller/toast-controller';
export { Toggle } from './components/toggle/toggle'; export { Toggle } from './components/toggle/toggle';
@ -148,7 +156,7 @@ export { ViewController } from './navigation/view-controller';
// export all of the component declarations that are dynamically created // export all of the component declarations that are dynamically created
export * from './components'; export * from './components';
export { DomController, RafCallback } from './global/dom-controller' export { DomController, RafCallback } from './global/dom-controller';
export interface Config { export interface Config {
get: (key: string, fallback?: any) => any; get: (key: string, fallback?: any) => any;
@ -173,7 +181,7 @@ export interface StencilElement extends HTMLElement {
} }
export interface OverlayDismissEvent extends CustomEvent { export interface OverlayDismissEvent extends CustomEvent {
detail: OverlayDismissEventDetail detail: OverlayDismissEventDetail;
} }
export interface OverlayDismissEventDetail { export interface OverlayDismissEventDetail {