md.transition-30ce8d1b.js 2.4 KB

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