javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(all): add support for configuring animations on a per-page basis (#21433)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-06-08 15:49:14 -04:00
committed by GitHub
parent c8db0d5eeb
commit f34d3752e3
34 changed files with 334 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components/nav-link/nav-link-utils.ts
View File

@ -1,19 +1,19 @@
import { ComponentProps, NavComponent } from '../../interface';
import { AnimationBuilder, ComponentProps, NavComponent } from '../../interface';
import { RouterDirection } from '../router/utils/interface';
export const navLink = (el: HTMLElement, routerDirection: RouterDirection, component?: NavComponent, componentProps?: ComponentProps) => {
export const navLink = (el: HTMLElement, routerDirection: RouterDirection, component?: NavComponent, componentProps?: ComponentProps, routerAnimation?: AnimationBuilder) => {
const nav = el.closest('ion-nav');
if (nav) {
if (routerDirection === 'forward') {
if (component !== undefined) {
return nav.push(component, componentProps, { skipIfBusy: true });
return nav.push(component, componentProps, { skipIfBusy: true, animationBuilder: routerAnimation });
}
} else if (routerDirection === 'root') {
if (component !== undefined) {
return nav.setRoot(component, componentProps, { skipIfBusy: true });
return nav.setRoot(component, componentProps, { skipIfBusy: true, animationBuilder: routerAnimation });
}
} else if (routerDirection === 'back') {
return nav.pop({ skipIfBusy: true });
return nav.pop({ skipIfBusy: true, animationBuilder: routerAnimation });
}
}
return Promise.resolve(false);

9
core/src/components/nav-link/nav-link.tsx
View File

@ -1,6 +1,6 @@
import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core';
import { ComponentProps, NavComponent, RouterDirection } from '../../interface';
import { AnimationBuilder, ComponentProps, NavComponent, RouterDirection } from '../../interface';
import { navLink } from './nav-link-utils';
@ -25,8 +25,13 @@ export class NavLink implements ComponentInterface {
*/
@Prop() routerDirection: RouterDirection = 'forward';
/**
* The transition animation when navigating to another page.
*/
@Prop() routerAnimation?: AnimationBuilder;
private onClick = () => {
return navLink(this.el, this.routerDirection, this.component, this.componentProps);
return navLink(this.el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
}
render() {

1
core/src/components/nav-link/readme.md
View File

@ -14,6 +14,7 @@ It is the element form of calling the `push()`, `pop()`, and `setRoot()` methods
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- |
| `component` | `component` | Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`. | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` |
| `componentProps` | -- | Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`. | `undefined \| { [key: string]: any; }` | `undefined` |
| `routerAnimation` | -- | The transition animation when navigating to another page. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `routerDirection` | `router-direction` | The transition direction when navigating to another page. | `"back" \| "forward" \| "root"` | `'forward'` |