mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
refactor(structure): allow content to scroll under headers/footers
This commit is contained in:
@ -2,7 +2,8 @@ import {Component, ComponentResolver, ElementRef, HostListener, Renderer, ViewCh
|
||||
|
||||
import {addSelector} from '../../config/bootstrap';
|
||||
import {Animation} from '../../animations/animation';
|
||||
import {Transition, TransitionOptions} from '../../transitions/transition';
|
||||
import {PageTransition} from '../../transitions/page-transition';
|
||||
import {TransitionOptions} from '../../transitions/transition';
|
||||
import {Config} from '../../config/config';
|
||||
import {NavParams} from '../nav/nav-params';
|
||||
import {Platform} from '../../platform/platform';
|
||||
@ -244,9 +245,9 @@ export interface PopoverOptions {
|
||||
/**
|
||||
* Animations for popover
|
||||
*/
|
||||
class PopoverTransition extends Transition {
|
||||
constructor(opts: TransitionOptions) {
|
||||
super(opts);
|
||||
class PopoverTransition extends PageTransition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
}
|
||||
|
||||
mdPositionView(nativeEle: HTMLElement, ev: any) {
|
||||
@ -392,16 +393,16 @@ class PopoverTransition extends Transition {
|
||||
}
|
||||
|
||||
class PopoverPopIn extends PopoverTransition {
|
||||
constructor(private enteringView: ViewController, private leavingView: ViewController, private opts: TransitionOptions) {
|
||||
super(opts);
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, private opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
|
||||
let ele = enteringView.pageRef().nativeElement;
|
||||
|
||||
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
|
||||
|
||||
wrapper.fromTo('opacity', '0.01', '1');
|
||||
backdrop.fromTo('opacity', '0.01', '0.08');
|
||||
wrapper.fromTo('opacity', 0.01, 1);
|
||||
backdrop.fromTo('opacity', 0.01, 0.08);
|
||||
|
||||
this
|
||||
.easing('ease')
|
||||
@ -417,19 +418,19 @@ class PopoverPopIn extends PopoverTransition {
|
||||
});
|
||||
}
|
||||
}
|
||||
Transition.register('popover-pop-in', PopoverPopIn);
|
||||
PageTransition.register('popover-pop-in', PopoverPopIn);
|
||||
|
||||
|
||||
class PopoverPopOut extends PopoverTransition {
|
||||
constructor(private enteringView: ViewController, private leavingView: ViewController, private opts: TransitionOptions) {
|
||||
super(opts);
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, private opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
|
||||
let ele = leavingView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
|
||||
|
||||
wrapper.fromTo('opacity', '1', '0');
|
||||
backdrop.fromTo('opacity', '0.08', '0');
|
||||
wrapper.fromTo('opacity', 0.99, 0);
|
||||
backdrop.fromTo('opacity', 0.08, 0);
|
||||
|
||||
this
|
||||
.easing('ease')
|
||||
@ -438,20 +439,20 @@ class PopoverPopOut extends PopoverTransition {
|
||||
.add(wrapper);
|
||||
}
|
||||
}
|
||||
Transition.register('popover-pop-out', PopoverPopOut);
|
||||
PageTransition.register('popover-pop-out', PopoverPopOut);
|
||||
|
||||
|
||||
class PopoverMdPopIn extends PopoverTransition {
|
||||
constructor(private enteringView: ViewController, private leavingView: ViewController, private opts: TransitionOptions) {
|
||||
super(opts);
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, private opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
|
||||
let ele = enteringView.pageRef().nativeElement;
|
||||
|
||||
let content = new Animation(ele.querySelector('.popover-content'));
|
||||
let viewport = new Animation(ele.querySelector('.popover-viewport'));
|
||||
|
||||
content.fromTo('scale', '0.001', '1');
|
||||
viewport.fromTo('opacity', '0', '1');
|
||||
content.fromTo('scale', 0.001, 1);
|
||||
viewport.fromTo('opacity', 0.01, 1);
|
||||
|
||||
this
|
||||
.easing('cubic-bezier(0.36,0.66,0.04,1)')
|
||||
@ -467,26 +468,26 @@ class PopoverMdPopIn extends PopoverTransition {
|
||||
});
|
||||
}
|
||||
}
|
||||
Transition.register('popover-md-pop-in', PopoverMdPopIn);
|
||||
PageTransition.register('popover-md-pop-in', PopoverMdPopIn);
|
||||
|
||||
|
||||
class PopoverMdPopOut extends PopoverTransition {
|
||||
constructor(private enteringView: ViewController, private leavingView: ViewController, private opts: TransitionOptions) {
|
||||
super(opts);
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, private opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
|
||||
let ele = leavingView.pageRef().nativeElement;
|
||||
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
|
||||
|
||||
wrapper.fromTo('opacity', '1', '0');
|
||||
wrapper.fromTo('opacity', 0.99, 0);
|
||||
|
||||
this
|
||||
.easing('ease')
|
||||
.duration(500)
|
||||
.fadeIn()
|
||||
.fromTo('opacity', 0.01, 1)
|
||||
.add(wrapper);
|
||||
}
|
||||
}
|
||||
Transition.register('popover-md-pop-out', PopoverMdPopOut);
|
||||
PageTransition.register('popover-md-pop-out', PopoverMdPopOut);
|
||||
|
||||
|
||||
let popoverIds = -1;
|
||||
|
Reference in New Issue
Block a user