transition-wp.js 2.3KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. import { Animation } from '../animations/animation';
  2. import { isPresent } from '../util/util';
  3. import { PageTransition } from './page-transition';
  4. const SHOW_BACK_BTN_CSS = 'show-back-button';
  5. const SCALE_SMALL = .95;
  6. export class WPTransition extends PageTransition {
  7. init() {
  8. super.init();
  9. const plt = this.plt;
  10. const enteringView = this.enteringView;
  11. const leavingView = this.leavingView;
  12. const opts = this.opts;
  13. // what direction is the transition going
  14. const backDirection = (opts.direction === 'back');
  15. if (enteringView) {
  16. if (backDirection) {
  17. this.duration(isPresent(opts.duration) ? opts.duration : 120).easing('cubic-bezier(0.47,0,0.745,0.715)');
  18. this.enteringPage.beforeClearStyles(['scale']);
  19. }
  20. else {
  21. this.duration(isPresent(opts.duration) ? opts.duration : 280).easing('cubic-bezier(0,0,0.05,1)');
  22. this.enteringPage
  23. .fromTo('scale', SCALE_SMALL, 1, true)
  24. .fromTo('opacity', 0.01, 1, true);
  25. }
  26. if (enteringView.hasNavbar()) {
  27. const enteringPageEle = enteringView.pageRef().nativeElement;
  28. const enteringNavbarEle = enteringPageEle.querySelector('ion-navbar');
  29. const enteringNavBar = new Animation(plt, enteringNavbarEle);
  30. this.add(enteringNavBar);
  31. const enteringBackButton = new Animation(plt, enteringNavbarEle.querySelector('.back-button'));
  32. this.add(enteringBackButton);
  33. if (enteringView.enableBack()) {
  34. enteringBackButton.beforeAddClass(SHOW_BACK_BTN_CSS);
  35. }
  36. else {
  37. enteringBackButton.beforeRemoveClass(SHOW_BACK_BTN_CSS);
  38. }
  39. }
  40. }
  41. // setup leaving view
  42. if (leavingView && backDirection) {
  43. // leaving content
  44. this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
  45. const leavingPage = new Animation(plt, leavingView.pageRef());
  46. this.add(leavingPage.fromTo('scale', 1, SCALE_SMALL).fromTo('opacity', 0.99, 0));
  47. }
  48. }
  49. }
  50. //# sourceMappingURL=transition-wp.js.map