md.transition.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. import { c as createAnimation } from './animation.js';
  5. import { g as getIonPageElement } from './index2.js';
  6. const mdTransitionAnimation = (_, opts) => {
  7. var _a, _b, _c;
  8. const OFF_BOTTOM = '40px';
  9. const CENTER = '0px';
  10. const backDirection = opts.direction === 'back';
  11. const enteringEl = opts.enteringEl;
  12. const leavingEl = opts.leavingEl;
  13. const ionPageElement = getIonPageElement(enteringEl);
  14. const enteringToolbarEle = ionPageElement.querySelector('ion-toolbar');
  15. const rootTransition = createAnimation();
  16. rootTransition.addElement(ionPageElement).fill('both').beforeRemoveClass('ion-page-invisible');
  17. // animate the component itself
  18. if (backDirection) {
  19. rootTransition.duration(((_a = opts.duration) !== null && _a !== void 0 ? _a : 0) || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
  20. }
  21. else {
  22. rootTransition
  23. .duration(((_b = opts.duration) !== null && _b !== void 0 ? _b : 0) || 280)
  24. .easing('cubic-bezier(0.36,0.66,0.04,1)')
  25. .fromTo('transform', `translateY(${OFF_BOTTOM})`, `translateY(${CENTER})`)
  26. .fromTo('opacity', 0.01, 1);
  27. }
  28. // Animate toolbar if it's there
  29. if (enteringToolbarEle) {
  30. const enteringToolBar = createAnimation();
  31. enteringToolBar.addElement(enteringToolbarEle);
  32. rootTransition.addAnimation(enteringToolBar);
  33. }
  34. // setup leaving view
  35. if (leavingEl && backDirection) {
  36. // leaving content
  37. rootTransition.duration(((_c = opts.duration) !== null && _c !== void 0 ? _c : 0) || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
  38. const leavingPage = createAnimation();
  39. leavingPage
  40. .addElement(getIonPageElement(leavingEl))
  41. .onFinish((currentStep) => {
  42. if (currentStep === 1 && leavingPage.elements.length > 0) {
  43. leavingPage.elements[0].style.setProperty('display', 'none');
  44. }
  45. })
  46. .fromTo('transform', `translateY(${CENTER})`, `translateY(${OFF_BOTTOM})`)
  47. .fromTo('opacity', 1, 0);
  48. rootTransition.addAnimation(leavingPage);
  49. }
  50. return rootTransition;
  51. };
  52. export { mdTransitionAnimation };