From c56e80d5d23e7720cabc40f1c8e1df3bcc54dca6 Mon Sep 17 00:00:00 2001 From: Mike Hartington Date: Wed, 29 Nov 2017 08:58:21 -0800 Subject: [PATCH] feat(): diffenernt animations for different modes --- packages/core/src/components.d.ts | 226 +++++++++--------- .../components/action-sheet/action-sheet.tsx | 27 +-- .../action-sheet/animations/md.enter.ts | 25 ++ .../action-sheet/animations/md.leave.ts | 27 +++ packages/core/src/components/alert/alert.tsx | 26 +- .../components/alert/animations/md.enter.ts | 25 ++ .../components/alert/animations/md.leave.ts | 25 ++ packages/core/src/components/app/app.tsx | 2 +- .../components/datetime/test/basic/index.html | 2 +- .../components/item-options/item-options.tsx | 6 +- .../components/loading/animations/md.enter.ts | 28 +++ .../components/loading/animations/md.leave.ts | 28 +++ .../core/src/components/loading/loading.tsx | 26 +- .../components/modal/animations/md.enter.ts | 31 +++ .../components/modal/animations/md.leave.ts | 31 +++ packages/core/src/components/modal/modal.tsx | 31 +-- .../components/picker/animations/ios.enter.ts | 4 +- .../components/picker/animations/ios.leave.ts | 4 +- .../core/src/components/picker/picker.tsx | 18 +- .../components/popover/animations/md.enter.ts | 20 ++ .../components/popover/animations/md.leave.ts | 24 ++ .../core/src/components/popover/popover.tsx | 20 +- .../components/toast/animations/ios.enter.ts | 4 +- .../components/toast/animations/md.enter.ts | 37 +++ .../components/toast/animations/md.leave.ts | 33 +++ packages/core/src/components/toast/toast.tsx | 25 +- packages/core/src/index.d.ts | 20 +- 27 files changed, 531 insertions(+), 244 deletions(-) create mode 100644 packages/core/src/components/action-sheet/animations/md.enter.ts create mode 100644 packages/core/src/components/action-sheet/animations/md.leave.ts create mode 100644 packages/core/src/components/alert/animations/md.enter.ts create mode 100644 packages/core/src/components/alert/animations/md.leave.ts create mode 100644 packages/core/src/components/loading/animations/md.enter.ts create mode 100644 packages/core/src/components/loading/animations/md.leave.ts create mode 100644 packages/core/src/components/modal/animations/md.enter.ts create mode 100644 packages/core/src/components/modal/animations/md.leave.ts create mode 100644 packages/core/src/components/popover/animations/md.enter.ts create mode 100644 packages/core/src/components/popover/animations/md.leave.ts create mode 100644 packages/core/src/components/toast/animations/md.enter.ts create mode 100644 packages/core/src/components/toast/animations/md.leave.ts diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 642bd6c20d..93fa677c06 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -65,7 +65,7 @@ declare global { } namespace JSXElements { export interface IonActionSheetControllerAttributes extends HTMLAttributes { - + } } } @@ -95,7 +95,7 @@ declare global { } namespace JSXElements { export interface IonActionSheetAttributes extends HTMLAttributes { - + cssClass?: string, title?: string, subTitle?: string, @@ -104,7 +104,7 @@ declare global { translucent?: boolean, animate?: boolean, enterAnimation?: AnimationBuilder, - exitAnimation?: AnimationBuilder, + leaveAnimation?: AnimationBuilder, actionSheetId?: string } } @@ -135,7 +135,7 @@ declare global { } namespace JSXElements { export interface IonAlertControllerAttributes extends HTMLAttributes { - + } } } @@ -165,7 +165,7 @@ declare global { } namespace JSXElements { export interface IonAlertAttributes extends HTMLAttributes { - + cssClass?: string, title?: string, subTitle?: string, @@ -174,10 +174,10 @@ declare global { inputs?: AlertInput[], enableBackdropDismiss?: boolean, translucent?: boolean, + alertId?: string, animate?: boolean, enterAnimation?: AnimationBuilder, - exitAnimation?: AnimationBuilder, - alertId?: string + leaveAnimation?: AnimationBuilder } } } @@ -207,7 +207,7 @@ declare global { } namespace JSXElements { export interface IonAnimationControllerAttributes extends HTMLAttributes { - + } } } @@ -237,7 +237,7 @@ declare global { } namespace JSXElements { export interface IonAppAttributes extends HTMLAttributes { - + } } } @@ -267,7 +267,7 @@ declare global { } namespace JSXElements { export interface AppCordovaPageOneAttributes extends HTMLAttributes { - + } } } @@ -297,7 +297,7 @@ declare global { } namespace JSXElements { export interface AppCordovaPageTabsAttributes extends HTMLAttributes { - + } } } @@ -327,7 +327,7 @@ declare global { } namespace JSXElements { export interface AppCordovaPageThreeAttributes extends HTMLAttributes { - + } } } @@ -357,7 +357,7 @@ declare global { } namespace JSXElements { export interface AppCordovaPageTwoAttributes extends HTMLAttributes { - + } } } @@ -387,7 +387,7 @@ declare global { } namespace JSXElements { export interface IonAvatarAttributes extends HTMLAttributes { - + } } } @@ -417,7 +417,7 @@ declare global { } namespace JSXElements { export interface IonBackdropAttributes extends HTMLAttributes { - + } } } @@ -447,7 +447,7 @@ declare global { } namespace JSXElements { export interface IonBadgeAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md' } @@ -479,7 +479,7 @@ declare global { } namespace JSXElements { export interface IonButtonAttributes extends HTMLAttributes { - + itemButton?: boolean, href?: string, buttonType?: string, @@ -520,7 +520,7 @@ declare global { } namespace JSXElements { export interface IonButtonsAttributes extends HTMLAttributes { - + } } } @@ -550,7 +550,7 @@ declare global { } namespace JSXElements { export interface IonCardContentAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md' } @@ -582,7 +582,7 @@ declare global { } namespace JSXElements { export interface IonCardHeaderAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', translucent?: boolean @@ -615,7 +615,7 @@ declare global { } namespace JSXElements { export interface IonCardSubtitleAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md' } @@ -647,7 +647,7 @@ declare global { } namespace JSXElements { export interface IonCardTitleAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md' } @@ -679,7 +679,7 @@ declare global { } namespace JSXElements { export interface IonCardAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md' } @@ -711,7 +711,7 @@ declare global { } namespace JSXElements { export interface IonCheckboxAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', name?: string, @@ -747,7 +747,7 @@ declare global { } namespace JSXElements { export interface IonChipButtonAttributes extends HTMLAttributes { - + href?: string, color?: string, mode?: 'ios' | 'md', @@ -782,7 +782,7 @@ declare global { } namespace JSXElements { export interface IonChipAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md' } @@ -814,7 +814,7 @@ declare global { } namespace JSXElements { export interface IonColAttributes extends HTMLAttributes { - + } } } @@ -844,7 +844,7 @@ declare global { } namespace JSXElements { export interface IonContentAttributes extends HTMLAttributes { - + ionScrollStart?: Function, ionScroll?: Function, ionScrollEnd?: Function, @@ -878,7 +878,7 @@ declare global { } namespace JSXElements { export interface IonDatetimeAttributes extends HTMLAttributes { - + disabled?: boolean, min?: string, max?: string, @@ -927,7 +927,7 @@ declare global { } namespace JSXElements { export interface IonFabAttributes extends HTMLAttributes { - + } } } @@ -957,7 +957,7 @@ declare global { } namespace JSXElements { export interface IonFabListAttributes extends HTMLAttributes { - + activated?: boolean } } @@ -988,7 +988,7 @@ declare global { } namespace JSXElements { export interface IonFabButtonAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', href?: string, @@ -1026,7 +1026,7 @@ declare global { } namespace JSXElements { export interface IonFooterAttributes extends HTMLAttributes { - + translucent?: boolean } } @@ -1057,7 +1057,7 @@ declare global { } namespace JSXElements { export interface IonGestureControllerAttributes extends HTMLAttributes { - + } } } @@ -1087,7 +1087,7 @@ declare global { } namespace JSXElements { export interface IonGestureAttributes extends HTMLAttributes { - + enabled?: boolean, attachTo?: ElementRef, autoBlockAll?: boolean, @@ -1135,7 +1135,7 @@ declare global { } namespace JSXElements { export interface IonGridAttributes extends HTMLAttributes { - + } } } @@ -1165,7 +1165,7 @@ declare global { } namespace JSXElements { export interface IonHeaderAttributes extends HTMLAttributes { - + translucent?: boolean } } @@ -1196,7 +1196,7 @@ declare global { } namespace JSXElements { export interface IonInfiniteScrollContentAttributes extends HTMLAttributes { - + loadingSpinner?: string, loadingText?: string } @@ -1228,7 +1228,7 @@ declare global { } namespace JSXElements { export interface IonInfiniteScrollAttributes extends HTMLAttributes { - + threshold?: string, enabled?: boolean, position?: string @@ -1261,7 +1261,7 @@ declare global { } namespace JSXElements { export interface IonInputAttributes extends HTMLAttributes { - + accept?: string, autocapitalize?: string, autocomplete?: string, @@ -1317,7 +1317,7 @@ declare global { } namespace JSXElements { export interface IonItemDividerAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md' } @@ -1349,7 +1349,7 @@ declare global { } namespace JSXElements { export interface IonItemOptionAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', href?: string, @@ -1383,7 +1383,7 @@ declare global { } namespace JSXElements { export interface IonItemOptionsAttributes extends HTMLAttributes { - + side?: Side } } @@ -1414,7 +1414,7 @@ declare global { } namespace JSXElements { export interface IonItemSlidingAttributes extends HTMLAttributes { - + } } } @@ -1444,7 +1444,7 @@ declare global { } namespace JSXElements { export interface IonItemAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', href?: string @@ -1477,7 +1477,7 @@ declare global { } namespace JSXElements { export interface IonKeyboardControllerAttributes extends HTMLAttributes { - + } } } @@ -1507,7 +1507,7 @@ declare global { } namespace JSXElements { export interface IonLabelAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', fixed?: boolean, @@ -1542,7 +1542,7 @@ declare global { } namespace JSXElements { export interface IonListHeaderAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md' } @@ -1574,7 +1574,7 @@ declare global { } namespace JSXElements { export interface IonListAttributes extends HTMLAttributes { - + } } } @@ -1604,7 +1604,7 @@ declare global { } namespace JSXElements { export interface IonLoadingControllerAttributes extends HTMLAttributes { - + } } } @@ -1634,16 +1634,16 @@ declare global { } namespace JSXElements { export interface IonLoadingAttributes extends HTMLAttributes { - + cssClass?: string, content?: string, dismissOnPageChange?: boolean, duration?: number, translucent?: boolean, - enterAnimation?: AnimationBuilder, - exitAnimation?: AnimationBuilder, loadingId?: string, - showBackdrop?: boolean + showBackdrop?: boolean, + enterAnimation?: AnimationBuilder, + leaveAnimation?: AnimationBuilder } } } @@ -1673,7 +1673,7 @@ declare global { } namespace JSXElements { export interface IonMenuControllerAttributes extends HTMLAttributes { - + } } } @@ -1703,7 +1703,7 @@ declare global { } namespace JSXElements { export interface IonMenuAttributes extends HTMLAttributes { - + content?: string, menuId?: string, type?: string, @@ -1741,7 +1741,7 @@ declare global { } namespace JSXElements { export interface IonModalControllerAttributes extends HTMLAttributes { - + } } } @@ -1771,17 +1771,17 @@ declare global { } namespace JSXElements { export interface IonModalAttributes extends HTMLAttributes { - + mode?: string, color?: string, component?: string, componentProps?: any, cssClass?: string, enableBackdropDismiss?: boolean, - enterAnimation?: AnimationBuilder, - exitAnimation?: AnimationBuilder, modalId?: string, - showBackdrop?: boolean + showBackdrop?: boolean, + enterAnimation?: AnimationBuilder, + leaveAnimation?: AnimationBuilder } } } @@ -1811,7 +1811,7 @@ declare global { } namespace JSXElements { export interface IonNavControllerAttributes extends HTMLAttributes { - + delegate?: FrameworkDelegate } } @@ -1842,7 +1842,7 @@ declare global { } namespace JSXElements { export interface StencilIonNavDelegateAttributes extends HTMLAttributes { - + } } } @@ -1872,7 +1872,7 @@ declare global { } namespace JSXElements { export interface IonNavAttributes extends HTMLAttributes { - + mode?: string, root?: any, delegate?: FrameworkDelegate @@ -1905,7 +1905,7 @@ declare global { } namespace JSXElements { export interface IonNavbarAttributes extends HTMLAttributes { - + hideBackButton?: boolean, backButtonText?: string, backButtonIcon?: string, @@ -1939,7 +1939,7 @@ declare global { } namespace JSXElements { export interface IonNoteAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md' } @@ -1971,7 +1971,7 @@ declare global { } namespace JSXElements { export interface IonPageAttributes extends HTMLAttributes { - + } } } @@ -2001,7 +2001,7 @@ declare global { } namespace JSXElements { export interface IonPickerColumnAttributes extends HTMLAttributes { - + col?: PickerColumn } } @@ -2032,7 +2032,7 @@ declare global { } namespace JSXElements { export interface IonPickerControllerAttributes extends HTMLAttributes { - + } } } @@ -2062,13 +2062,13 @@ declare global { } namespace JSXElements { export interface IonPickerAttributes extends HTMLAttributes { - + cssClass?: string, content?: string, dismissOnPageChange?: boolean, duration?: number, enterAnimation?: AnimationBuilder, - exitAnimation?: AnimationBuilder, + leaveAnimation?: AnimationBuilder, pickerId?: string, showBackdrop?: boolean, enableBackdropDismiss?: boolean, @@ -2103,7 +2103,7 @@ declare global { } namespace JSXElements { export interface IonPopoverControllerAttributes extends HTMLAttributes { - + } } } @@ -2133,7 +2133,7 @@ declare global { } namespace JSXElements { export interface IonPopoverAttributes extends HTMLAttributes { - + mode?: string, color?: string, component?: string, @@ -2141,7 +2141,7 @@ declare global { cssClass?: string, enableBackdropDismiss?: boolean, enterAnimation?: AnimationBuilder, - exitAnimation?: AnimationBuilder, + leaveAnimation?: AnimationBuilder, ev?: Event, popoverId?: string, showBackdrop?: boolean, @@ -2175,7 +2175,7 @@ declare global { } namespace JSXElements { export interface IonRadioGroupAttributes extends HTMLAttributes { - + allowEmptySelection?: boolean, disabled?: boolean, name?: string, @@ -2209,7 +2209,7 @@ declare global { } namespace JSXElements { export interface IonRadioAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', name?: string, @@ -2245,7 +2245,7 @@ declare global { } namespace JSXElements { export interface IonRangeKnobAttributes extends HTMLAttributes { - + pressed?: boolean, pin?: boolean, min?: number, @@ -2284,7 +2284,7 @@ declare global { } namespace JSXElements { export interface IonRangeAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', debounce?: number, @@ -2325,7 +2325,7 @@ declare global { } namespace JSXElements { export interface IonReorderGroupAttributes extends HTMLAttributes { - + enabled?: boolean } } @@ -2356,7 +2356,7 @@ declare global { } namespace JSXElements { export interface IonReorderAttributes extends HTMLAttributes { - + } } } @@ -2386,7 +2386,7 @@ declare global { } namespace JSXElements { export interface IonRouteLinkAttributes extends HTMLAttributes { - + url?: string, router?: any } @@ -2418,7 +2418,7 @@ declare global { } namespace JSXElements { export interface IonRouteAttributes extends HTMLAttributes { - + path?: string, component?: string, props?: any @@ -2451,7 +2451,7 @@ declare global { } namespace JSXElements { export interface IonRouterControllerAttributes extends HTMLAttributes { - + } } } @@ -2481,7 +2481,7 @@ declare global { } namespace JSXElements { export interface IonRowAttributes extends HTMLAttributes { - + } } } @@ -2511,7 +2511,7 @@ declare global { } namespace JSXElements { export interface IonScrollAttributes extends HTMLAttributes { - + enabled?: boolean, jsScroll?: boolean, onionScrollStart?: ScrollCallback, @@ -2546,7 +2546,7 @@ declare global { } namespace JSXElements { export interface IonSearchbarAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', animated?: boolean, @@ -2588,7 +2588,7 @@ declare global { } namespace JSXElements { export interface IonSegmentButtonAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', checked?: boolean, @@ -2623,7 +2623,7 @@ declare global { } namespace JSXElements { export interface IonSegmentAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', disabled?: boolean, @@ -2657,7 +2657,7 @@ declare global { } namespace JSXElements { export interface IonSelectOptionAttributes extends HTMLAttributes { - + disabled?: boolean, selected?: boolean, value?: string @@ -2690,7 +2690,7 @@ declare global { } namespace JSXElements { export interface IonSelectPopoverAttributes extends HTMLAttributes { - + options?: SelectPopoverOption[], value?: string } @@ -2722,7 +2722,7 @@ declare global { } namespace JSXElements { export interface IonSelectAttributes extends HTMLAttributes { - + disabled?: boolean, cancelText?: string, okText?: string, @@ -2761,7 +2761,7 @@ declare global { } namespace JSXElements { export interface IonSkeletonTextAttributes extends HTMLAttributes { - + width?: string } } @@ -2792,7 +2792,7 @@ declare global { } namespace JSXElements { export interface IonSlideAttributes extends HTMLAttributes { - + } } } @@ -2822,7 +2822,7 @@ declare global { } namespace JSXElements { export interface IonSlidesAttributes extends HTMLAttributes { - + effect?: string, autoplay?: number, control?: any, @@ -2866,7 +2866,7 @@ declare global { } namespace JSXElements { export interface IonSpinnerAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', duration?: number, @@ -2901,7 +2901,7 @@ declare global { } namespace JSXElements { export interface IonSplitPaneAttributes extends HTMLAttributes { - + enabled?: boolean, when?: string | boolean } @@ -2933,7 +2933,7 @@ declare global { } namespace JSXElements { export interface IonTabButtonAttributes extends HTMLAttributes { - + selected?: boolean, tab?: HTMLIonTabElement } @@ -2965,7 +2965,7 @@ declare global { } namespace JSXElements { export interface IonTabHighlightAttributes extends HTMLAttributes { - + selectedTab?: HTMLIonTabElement } } @@ -2996,7 +2996,7 @@ declare global { } namespace JSXElements { export interface IonTabAttributes extends HTMLAttributes { - + btnId?: string, path?: string, title?: string, @@ -3036,7 +3036,7 @@ declare global { } namespace JSXElements { export interface IonTabbarAttributes extends HTMLAttributes { - + placement?: string, tabs?: HTMLIonTabElement[], selectedTab?: HTMLIonTabElement, @@ -3072,7 +3072,7 @@ declare global { } namespace JSXElements { export interface IonTabsAttributes extends HTMLAttributes { - + name?: string, tabbarHidden?: boolean, tabbarLayout?: string, @@ -3108,7 +3108,7 @@ declare global { } namespace JSXElements { export interface PageTabAttributes extends HTMLAttributes { - + } } } @@ -3138,7 +3138,7 @@ declare global { } namespace JSXElements { export interface TranslucentPageTabAttributes extends HTMLAttributes { - + } } } @@ -3168,7 +3168,7 @@ declare global { } namespace JSXElements { export interface IonTextareaAttributes extends HTMLAttributes { - + autocapitalize?: string, autocomplete?: string, autofocus?: boolean, @@ -3214,7 +3214,7 @@ declare global { } namespace JSXElements { export interface IonThumbnailAttributes extends HTMLAttributes { - + } } } @@ -3244,7 +3244,7 @@ declare global { } namespace JSXElements { export interface IonTitleAttributes extends HTMLAttributes { - + } } } @@ -3274,7 +3274,7 @@ declare global { } namespace JSXElements { export interface IonToastControllerAttributes extends HTMLAttributes { - + } } } @@ -3304,7 +3304,7 @@ declare global { } namespace JSXElements { export interface IonToastAttributes extends HTMLAttributes { - + message?: string, cssClass?: string, duration?: number, @@ -3313,9 +3313,9 @@ declare global { dismissOnPageChange?: boolean, position?: string, translucent?: boolean, + toastId?: string, enterAnimation?: AnimationBuilder, - exitAnimation?: AnimationBuilder, - toastId?: string + leaveAnimation?: AnimationBuilder } } } @@ -3345,7 +3345,7 @@ declare global { } namespace JSXElements { export interface IonToggleAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', name?: string, @@ -3381,7 +3381,7 @@ declare global { } namespace JSXElements { export interface IonToolbarAttributes extends HTMLAttributes { - + color?: string, mode?: 'ios' | 'md', translucent?: boolean @@ -3414,7 +3414,7 @@ declare global { } namespace JSXElements { export interface IonUtilsAttributes extends HTMLAttributes { - + } } } diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx index 3d712d9edb..c5a5da0e1e 100644 --- a/packages/core/src/components/action-sheet/action-sheet.tsx +++ b/packages/core/src/components/action-sheet/action-sheet.tsx @@ -7,6 +7,9 @@ import { createThemedClasses } from '../../utils/theme'; import iOSEnterAnimation from './animations/ios.enter'; import iOSLeaveAnimation from './animations/ios.leave'; +import MdEnterAnimation from './animations/md.enter'; +import MdLeaveAnimation from './animations/md.leave'; + @Component({ tag: 'ion-action-sheet', styleUrls: { @@ -67,9 +70,9 @@ export class ActionSheet { @Prop() animate: boolean = true; @Prop() enterAnimation: AnimationBuilder; - @Prop() exitAnimation: AnimationBuilder; - @Prop() actionSheetId: string; + @Prop() leaveAnimation: AnimationBuilder; + @Prop() actionSheetId: string; @Method() present() { @@ -80,13 +83,7 @@ export class ActionSheet { this.ionActionSheetWillPresent.emit(); // get the user's animation fn if one was provided - let animationBuilder = this.enterAnimation; - - if (!animationBuilder) { - // user did not provide a custom animation fn - // decide from the config which animation to use - animationBuilder = iOSEnterAnimation; - } + const animationBuilder = this.enterAnimation || this.config.get('actionSheetEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation); // build the animation and kick it off this.animationCtrl.create(animationBuilder, this.el).then(animation => { @@ -110,14 +107,8 @@ export class ActionSheet { this.animation = null; } 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 => { this.animation = animation; @@ -295,5 +286,7 @@ export interface ActionSheetDismissEvent extends OverlayDismissEvent { export { iOSEnterAnimation as ActionSheetiOSEnterAnimation, - iOSLeaveAnimation as ActionSheetiOSLeaveAnimation + iOSLeaveAnimation as ActionSheetiOSLeaveAnimation, + MdEnterAnimation as ActionSheetMDEnterAnimation, + MdLeaveAnimation as ActionSheetMDLeaveAnimation, }; diff --git a/packages/core/src/components/action-sheet/animations/md.enter.ts b/packages/core/src/components/action-sheet/animations/md.enter.ts new file mode 100644 index 0000000000..c28a97974c --- /dev/null +++ b/packages/core/src/components/action-sheet/animations/md.enter.ts @@ -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); +} diff --git a/packages/core/src/components/action-sheet/animations/md.leave.ts b/packages/core/src/components/action-sheet/animations/md.leave.ts new file mode 100644 index 0000000000..02c85aab05 --- /dev/null +++ b/packages/core/src/components/action-sheet/animations/md.leave.ts @@ -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); +} diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx index 9cf65f5ce7..672fa1cc1f 100644 --- a/packages/core/src/components/alert/alert.tsx +++ b/packages/core/src/components/alert/alert.tsx @@ -9,6 +9,9 @@ import { createThemedClasses } from '../../utils/theme'; import iOSEnterAnimation from './animations/ios.enter'; import iOSLeaveAnimation from './animations/ios.leave'; +import MdEnterAnimation from './animations/md.enter'; +import MdLeaveAnimation from './animations/md.leave'; + @Component({ tag: 'ion-alert', styleUrls: { @@ -73,10 +76,11 @@ export class Alert { @Prop() translucent: boolean = false; @Prop() animate: boolean = true; - @Prop() enterAnimation: AnimationBuilder; - @Prop() exitAnimation: AnimationBuilder; @Prop() alertId: string; + @Prop() enterAnimation: AnimationBuilder; + @Prop() leaveAnimation: AnimationBuilder; + @Method() present() { if (this.animation) { this.animation.destroy(); @@ -85,12 +89,7 @@ export class Alert { this.ionAlertWillPresent.emit(); // get the user's animation fn if one was provided - let animationBuilder = this.enterAnimation; - if (!animationBuilder) { - // user did not provide a custom animation fn - // decide from the config which animation to use - animationBuilder = iOSEnterAnimation; - } + const animationBuilder = this.enterAnimation || this.config.get('alertEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation); // build the animation and kick it off 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 - let animationBuilder = this.exitAnimation; - if (!animationBuilder) { - // user did not provide a custom animation fn - // decide from the config which animation to use - animationBuilder = iOSLeaveAnimation; - } + const animationBuilder = this.leaveAnimation || this.config.get('alertLeave', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation); return this.animationCtrl.create(animationBuilder, this.el).then(animation => { this.animation = animation; @@ -488,5 +482,7 @@ export interface AlertDismissEvent extends OverlayDismissEvent { export { iOSEnterAnimation as AlertiOSEnterAnimation, - iOSLeaveAnimation as AlertiOSLeaveAnimation + iOSLeaveAnimation as AlertiOSLeaveAnimation, + MdEnterAnimation as AlertMDEnterAnimation, + MdLeaveAnimation as AlertMDLeaveAnimation, }; diff --git a/packages/core/src/components/alert/animations/md.enter.ts b/packages/core/src/components/alert/animations/md.enter.ts new file mode 100644 index 0000000000..f4b450ab3d --- /dev/null +++ b/packages/core/src/components/alert/animations/md.enter.ts @@ -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); +} diff --git a/packages/core/src/components/alert/animations/md.leave.ts b/packages/core/src/components/alert/animations/md.leave.ts new file mode 100644 index 0000000000..5c19317d3e --- /dev/null +++ b/packages/core/src/components/alert/animations/md.leave.ts @@ -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); +} diff --git a/packages/core/src/components/app/app.tsx b/packages/core/src/components/app/app.tsx index e402a57362..de7bc47c69 100644 --- a/packages/core/src/components/app/app.tsx +++ b/packages/core/src/components/app/app.tsx @@ -23,7 +23,7 @@ export class App { @State() useRouter: boolean = false; @Prop({ context: 'config' }) config: Config; - + componentWillLoad() { this.modeCode = this.config.get('mode'); this.useRouter = this.config.getBoolean('useRouter', false); diff --git a/packages/core/src/components/datetime/test/basic/index.html b/packages/core/src/components/datetime/test/basic/index.html index 6b3f98fecc..18b51117b0 100644 --- a/packages/core/src/components/datetime/test/basic/index.html +++ b/packages/core/src/components/datetime/test/basic/index.html @@ -3,7 +3,7 @@ Datetime - Basic - + diff --git a/packages/core/src/components/item-options/item-options.tsx b/packages/core/src/components/item-options/item-options.tsx index 763698324f..61c3a4a5af 100644 --- a/packages/core/src/components/item-options/item-options.tsx +++ b/packages/core/src/components/item-options/item-options.tsx @@ -34,13 +34,13 @@ export class ItemOptions { this.ionSwipe.emit(value); } - hostData(){ + hostData() { return { - class:{ + class: { 'item-options-left': !this.isRightSide(), 'item-options-right': this.isRightSide() } - } + }; } render() { diff --git a/packages/core/src/components/loading/animations/md.enter.ts b/packages/core/src/components/loading/animations/md.enter.ts new file mode 100644 index 0000000000..61a876183b --- /dev/null +++ b/packages/core/src/components/loading/animations/md.enter.ts @@ -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); +} diff --git a/packages/core/src/components/loading/animations/md.leave.ts b/packages/core/src/components/loading/animations/md.leave.ts new file mode 100644 index 0000000000..2ed4f46089 --- /dev/null +++ b/packages/core/src/components/loading/animations/md.leave.ts @@ -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); +} diff --git a/packages/core/src/components/loading/loading.tsx b/packages/core/src/components/loading/loading.tsx index 84cd9485d6..5fabfaae74 100644 --- a/packages/core/src/components/loading/loading.tsx +++ b/packages/core/src/components/loading/loading.tsx @@ -6,6 +6,9 @@ import { createThemedClasses } from '../../utils/theme'; import iOSEnterAnimation from './animations/ios.enter'; import iOSLeaveAnimation from './animations/ios.leave'; +import MdEnterAnimation from './animations/md.enter'; +import MdLeaveAnimation from './animations/md.leave'; + @Component({ tag: 'ion-loading', styleUrls: { @@ -65,11 +68,12 @@ export class Loading { @Prop() dismissOnPageChange: boolean = false; @Prop() duration: number; @Prop() translucent: boolean = false; - @Prop() enterAnimation: AnimationBuilder; - @Prop() exitAnimation: AnimationBuilder; @Prop() loadingId: string; @Prop() showBackdrop: boolean = true; + @Prop() enterAnimation: AnimationBuilder; + @Prop() leaveAnimation: AnimationBuilder; + present() { return new Promise(resolve => { this._present(resolve); @@ -85,13 +89,7 @@ export class Loading { this.ionLoadingWillPresent.emit({ loading: this }); // get the user's animation fn if one was provided - let animationBuilder = this.enterAnimation; - - if (!animationBuilder) { - // user did not provide a custom animation fn - // decide from the config which animation to use - animationBuilder = iOSEnterAnimation; - } + const animationBuilder = this.enterAnimation || this.config.get('loadingEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation); // build the animation and kick it off this.animationCtrl.create(animationBuilder, this.el).then(animation => { @@ -118,13 +116,7 @@ export class Loading { this.ionLoadingWillDismiss.emit({ loading: this }); // 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; - } + const animationBuilder = this.leaveAnimation || this.config.get('loadingLeave', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation); // build the animation and kick it off 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 }; diff --git a/packages/core/src/components/modal/animations/md.enter.ts b/packages/core/src/components/modal/animations/md.enter.ts new file mode 100644 index 0000000000..0ca4c8edb0 --- /dev/null +++ b/packages/core/src/components/modal/animations/md.enter.ts @@ -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); +} diff --git a/packages/core/src/components/modal/animations/md.leave.ts b/packages/core/src/components/modal/animations/md.leave.ts new file mode 100644 index 0000000000..4fcaa0489e --- /dev/null +++ b/packages/core/src/components/modal/animations/md.leave.ts @@ -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); +} diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx index 0971cfa9c0..45142310b2 100644 --- a/packages/core/src/components/modal/modal.tsx +++ b/packages/core/src/components/modal/modal.tsx @@ -1,10 +1,12 @@ 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 iOSEnterAnimation from './animations/ios.enter'; import iOSLeaveAnimation from './animations/ios.leave'; +import MdEnterAnimation from './animations/md.enter'; +import MdLeaveAnimation from './animations/md.leave'; @Component({ tag: 'ion-modal', styleUrls: { @@ -49,17 +51,20 @@ export class Modal { @Event() ionModalDidUnload: EventEmitter; @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController; + @Prop({ context: 'config' }) config: Config; @Prop() mode: string; @Prop() color: string; @Prop() component: string; @Prop() componentProps: any = {}; @Prop() cssClass: string; @Prop() enableBackdropDismiss: boolean = true; - @Prop() enterAnimation: AnimationBuilder; - @Prop() exitAnimation: AnimationBuilder; + @Prop() modalId: string; @Prop() showBackdrop: boolean = true; + @Prop() enterAnimation: AnimationBuilder; + @Prop() leaveAnimation: AnimationBuilder; + private animation: Animation; @@ -78,14 +83,7 @@ export class Modal { this.ionModalWillPresent.emit({ modal: this }); // get the user's animation fn if one was provided - let animationBuilder = this.enterAnimation; - - if (!animationBuilder) { - // user did not provide a custom animation fn - // decide from the config which animation to use - // TODO!! - animationBuilder = iOSEnterAnimation; - } + const animationBuilder = this.enterAnimation || this.config.get('modalEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation); // build the animation and kick it off this.animationCtrl.create(animationBuilder, this.el).then(animation => { @@ -109,14 +107,7 @@ export class Modal { this.ionModalWillDismiss.emit({ modal: this }); // 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 - // TODO!! - animationBuilder = iOSLeaveAnimation; - } + const animationBuilder = this.leaveAnimation || this.config.get('modalExit', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation); // build the animation and kick it off 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 }; diff --git a/packages/core/src/components/picker/animations/ios.enter.ts b/packages/core/src/components/picker/animations/ios.enter.ts index e989b8e102..9be1348fbf 100644 --- a/packages/core/src/components/picker/animations/ios.enter.ts +++ b/packages/core/src/components/picker/animations/ios.enter.ts @@ -19,8 +19,8 @@ export default function iOSEnterAnimation(Animation: Animation, baseElm: HTMLEle return baseAnimation .addElement(baseElm) - .easing('ease-in-out') - .duration(200) + .easing('cubic-bezier(.36,.66,.04,1)') + .duration(400) .add(backdropAnimation) .add(wrapperAnimation); } diff --git a/packages/core/src/components/picker/animations/ios.leave.ts b/packages/core/src/components/picker/animations/ios.leave.ts index 6d2e092ba1..dc618fbbf8 100644 --- a/packages/core/src/components/picker/animations/ios.leave.ts +++ b/packages/core/src/components/picker/animations/ios.leave.ts @@ -19,8 +19,8 @@ export default function iOSLeaveAnimation(Animation: Animation, baseElm: HTMLEle return baseAnimation .addElement(baseElm) - .easing('ease-in-out') - .duration(200) + .easing('cubic-bezier(.36,.66,.04,1)') + .duration(400) .add(backdropAnimation) .add(wrapperAnimation); } diff --git a/packages/core/src/components/picker/picker.tsx b/packages/core/src/components/picker/picker.tsx index ddf678e47b..57ed930b41 100644 --- a/packages/core/src/components/picker/picker.tsx +++ b/packages/core/src/components/picker/picker.tsx @@ -61,7 +61,7 @@ export class Picker { @Prop() dismissOnPageChange: boolean = false; @Prop() duration: number; @Prop() enterAnimation: AnimationBuilder; - @Prop() exitAnimation: AnimationBuilder; + @Prop() leaveAnimation: AnimationBuilder; @Prop() pickerId: string; @Prop() showBackdrop: boolean = true; @Prop() enableBackdropDismiss: boolean = true; @@ -84,13 +84,7 @@ export class Picker { this.ionPickerWillPresent.emit({ picker: this }); // get the user's animation fn if one was provided - let animationBuilder = this.enterAnimation; - - if (!animationBuilder) { - // user did not provide a custom animation fn - // decide from the config which animation to use - animationBuilder = iOSEnterAnimation; - } + const animationBuilder = this.enterAnimation || this.config.get('pickerEnter', iOSEnterAnimation); // build the animation and kick it off this.animationCtrl.create(animationBuilder, this.el).then(animation => { @@ -117,13 +111,7 @@ export class Picker { this.ionPickerWillDismiss.emit({ picker: this }); // 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; - } + const animationBuilder = this.leaveAnimation || this.config.get('pickerLeave', iOSLeaveAnimation); // build the animation and kick it off this.animationCtrl.create(animationBuilder, this.el).then(animation => { diff --git a/packages/core/src/components/popover/animations/md.enter.ts b/packages/core/src/components/popover/animations/md.enter.ts new file mode 100644 index 0000000000..4ded8a3817 --- /dev/null +++ b/packages/core/src/components/popover/animations/md.enter.ts @@ -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); +} diff --git a/packages/core/src/components/popover/animations/md.leave.ts b/packages/core/src/components/popover/animations/md.leave.ts new file mode 100644 index 0000000000..0df25ba237 --- /dev/null +++ b/packages/core/src/components/popover/animations/md.leave.ts @@ -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); +} diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx index 72056517a6..3a3d66fe04 100644 --- a/packages/core/src/components/popover/popover.tsx +++ b/packages/core/src/components/popover/popover.tsx @@ -5,6 +5,8 @@ import { createThemedClasses } from '../../utils/theme'; import iOSEnterAnimation from './animations/ios.enter'; import iOSLeaveAnimation from './animations/ios.leave'; +import MdEnterAnimation from './animations/md.enter'; +import MdLeaveAnimation from './animations/md.leave'; @Component({ tag: 'ion-popover', @@ -63,7 +65,7 @@ export class Popover { @Prop() cssClass: string; @Prop() enableBackdropDismiss: boolean = true; @Prop() enterAnimation: AnimationBuilder; - @Prop() exitAnimation: AnimationBuilder; + @Prop() leaveAnimation: AnimationBuilder; @Prop() ev: Event; @Prop() popoverId: string; @Prop() showBackdrop: boolean = true; @@ -205,13 +207,8 @@ export class Popover { this.ionPopoverWillPresent.emit({ popover: this }); // 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 this.animationCtrl.create(animationBuilder, this.el).then(animation => { @@ -235,12 +232,7 @@ export class Popover { this.ionPopoverWillDismiss.emit({ popover: this }); // 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; - } + const animationBuilder = this.leaveAnimation || this.config.get('popoverLeave', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation); // build the animation and kick it off 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 }; diff --git a/packages/core/src/components/toast/animations/ios.enter.ts b/packages/core/src/components/toast/animations/ios.enter.ts index 75eadba592..db49444093 100644 --- a/packages/core/src/components/toast/animations/ios.enter.ts +++ b/packages/core/src/components/toast/animations/ios.enter.ts @@ -16,7 +16,7 @@ export default function iOSEnterAnimation( switch (position) { case 'top': - wrapperAnimation.fromTo('translateY', '-100%', `${10}px`); + wrapperAnimation.fromTo('translateY', '-100%', '10px'); break; case 'middle': let topPosition = Math.floor( @@ -26,7 +26,7 @@ export default function iOSEnterAnimation( wrapperAnimation.fromTo('opacity', 0.01, 1); break; default: - wrapperAnimation.fromTo('translateY', '100%', `${0 - 10}px`); + wrapperAnimation.fromTo('translateY', '100%', '-10px'); break; } return baseAnimation diff --git a/packages/core/src/components/toast/animations/md.enter.ts b/packages/core/src/components/toast/animations/md.enter.ts new file mode 100644 index 0000000000..979d37bb5c --- /dev/null +++ b/packages/core/src/components/toast/animations/md.enter.ts @@ -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); +} diff --git a/packages/core/src/components/toast/animations/md.leave.ts b/packages/core/src/components/toast/animations/md.leave.ts new file mode 100644 index 0000000000..80f7e82f34 --- /dev/null +++ b/packages/core/src/components/toast/animations/md.leave.ts @@ -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); +} diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx index 8af47d5886..7755d4839d 100644 --- a/packages/core/src/components/toast/toast.tsx +++ b/packages/core/src/components/toast/toast.tsx @@ -6,6 +6,9 @@ import { createThemedClasses } from '../../utils/theme'; import iOSEnterAnimation from './animations/ios.enter'; import iOSLeaveAnimation from './animations/ios.leave'; +import MdEnterAnimation from './animations/md.enter'; +import MdLeaveAnimation from './animations/md.leave'; + @Component({ tag: 'ion-toast', styleUrls: { @@ -65,10 +68,11 @@ export class Toast { @Prop() dismissOnPageChange: boolean; @Prop() position: string; @Prop() translucent: boolean = false; - @Prop() enterAnimation: AnimationBuilder; - @Prop() exitAnimation: AnimationBuilder; @Prop() toastId: string; + @Prop() enterAnimation: AnimationBuilder; + @Prop() leaveAnimation: AnimationBuilder; + present() { return new Promise(resolve => { this._present(resolve); @@ -83,13 +87,7 @@ export class Toast { this.ionToastWillPresent.emit({ toast: this }); // get the user's animation fn if one was provided - let animationBuilder = this.enterAnimation; - - if (!animationBuilder) { - // user did not provide a custom animation fn - // decide from the config which animation to use - animationBuilder = iOSEnterAnimation; - } + const animationBuilder = this.enterAnimation || this.config.get('toastEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation); // build the animation and kick it off this.animationCtrl.create(animationBuilder, this.el, this.position).then(animation => { @@ -112,12 +110,7 @@ export class Toast { this.ionToastWillDismiss.emit({ toast: this }); // 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; - } + const animationBuilder = this.leaveAnimation || this.config.get('toastLeave', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation); // build the animation and kick it off 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 }; diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts index 1c4869f488..d2a08e6853 100644 --- a/packages/core/src/index.d.ts +++ b/packages/core/src/index.d.ts @@ -58,7 +58,9 @@ export { LoadingEvent, LoadingOptions, iOSEnterAnimation as LoadingIOSEnterAnimation, - iOSLeaveAnimation as LoadingIOSLeaveAnimation + iOSLeaveAnimation as LoadingIOSLeaveAnimation, + MdEnterAnimation as LoadingMDEnterAnimation, + MdLeaveAnimation as LoadingMDLeaveAnimation } from './components/loading/loading'; export { LoadingController } from './components/loading-controller/loading-controller'; export { Menu } from './components/menu/menu'; @@ -73,7 +75,9 @@ export { ModalOptions, ModalEvent, iOSEnterAnimation as ModalIOSEnterAnimation, - iOSLeaveAnimation as ModalIOSLeaveAnimation + iOSLeaveAnimation as ModalIOSLeaveAnimation, + MdEnterAnimation as ModalMDEnterAnimation, + MdLeaveAnimation as ModalMDLeaveAnimation } from './components/modal/modal'; export { ModalController } from './components/modal-controller/modal-controller'; export { Nav } from './components/nav/nav'; @@ -99,7 +103,9 @@ export { PopoverEvent, PopoverOptions, iOSEnterAnimation as PopoverIOSEnterAnimation, - iOSLeaveAnimation as PopoverIOSLeaveAnimation + iOSLeaveAnimation as PopoverIOSLeaveAnimation, + MdEnterAnimation as PopoverMDEnterAnimation, + MdLeaveAnimation as PopoverMDLeaveAnimation } from './components/popover/popover'; export { PopoverController } from './components/popover-controller/popover-controller'; export { RadioGroup } from './components/radio-group/radio-group'; @@ -136,7 +142,9 @@ export { ToastEvent, ToastOptions, iOSEnterAnimation as ToastIOSEnterAnimation, - iOSLeaveAnimation as ToastIOSLeaveAnimation + iOSLeaveAnimation as ToastIOSLeaveAnimation, + MdEnterAnimation as ToastMDEnterAnimation, + MdLeaveAnimation as ToastMDLeaveAnimation } from './components/toast/toast'; export { ToastController } from './components/toast-controller/toast-controller'; 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 * from './components'; -export { DomController, RafCallback } from './global/dom-controller' +export { DomController, RafCallback } from './global/dom-controller'; export interface Config { get: (key: string, fallback?: any) => any; @@ -173,7 +181,7 @@ export interface StencilElement extends HTMLElement { } export interface OverlayDismissEvent extends CustomEvent { - detail: OverlayDismissEventDetail + detail: OverlayDismissEventDetail; } export interface OverlayDismissEventDetail {