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 {
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 {
}
}
}

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 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,
};

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 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,
};

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;
@Prop({ context: 'config' }) config: Config;
componentWillLoad() {
this.modeCode = this.config.get('mode');
this.useRouter = this.config.getBoolean('useRouter', false);

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

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<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>
</head>
<body>

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

@ -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() {

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 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<void>(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 };

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 { 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 };

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
.addElement(baseElm)
.easing('ease-in-out')
.duration(200)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(400)
.add(backdropAnimation)
.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
.addElement(baseElm)
.easing('ease-in-out')
.duration(200)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(400)
.add(backdropAnimation)
.add(wrapperAnimation);
}

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

@ -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 => {

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 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 };

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

@ -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

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 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<void>(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 };

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

@ -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 {