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