wd-transition.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. const __default__ = {
  4. name: "wd-transition",
  5. options: {
  6. addGlobalClass: true,
  7. virtualHost: true,
  8. styleIsolation: "shared"
  9. }
  10. };
  11. const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
  12. ...__default__,
  13. props: common_vendor.transitionProps,
  14. emits: ["click", "before-enter", "enter", "before-leave", "leave", "after-leave", "after-enter"],
  15. setup(__props, { emit: __emit }) {
  16. const getClassNames = (name) => {
  17. let enter2 = `${props.enterClass} ${props.enterActiveClass}`;
  18. let enterTo = `${props.enterToClass} ${props.enterActiveClass}`;
  19. let leave2 = `${props.leaveClass} ${props.leaveActiveClass}`;
  20. let leaveTo = `${props.leaveToClass} ${props.leaveActiveClass}`;
  21. if (Array.isArray(name)) {
  22. for (let index = 0; index < name.length; index++) {
  23. enter2 = `wd-${name[index]}-enter wd-${name[index]}-enter-active ${enter2}`;
  24. enterTo = `wd-${name[index]}-enter-to wd-${name[index]}-enter-active ${enterTo}`;
  25. leave2 = `wd-${name[index]}-leave wd-${name[index]}-leave-active ${leave2}`;
  26. leaveTo = `wd-${name[index]}-leave-to wd-${name[index]}-leave-active ${leaveTo}`;
  27. }
  28. } else if (name) {
  29. enter2 = `wd-${name}-enter wd-${name}-enter-active ${enter2}`;
  30. enterTo = `wd-${name}-enter-to wd-${name}-enter-active ${enterTo}`;
  31. leave2 = `wd-${name}-leave wd-${name}-leave-active ${leave2}`;
  32. leaveTo = `wd-${name}-leave-to wd-${name}-leave-active ${leaveTo}`;
  33. }
  34. return {
  35. enter: enter2,
  36. "enter-to": enterTo,
  37. leave: leave2,
  38. "leave-to": leaveTo
  39. };
  40. };
  41. const props = __props;
  42. const emit = __emit;
  43. const inited = common_vendor.ref(false);
  44. const display = common_vendor.ref(false);
  45. const status = common_vendor.ref("");
  46. const transitionEnded = common_vendor.ref(false);
  47. const currentDuration = common_vendor.ref(300);
  48. const classes = common_vendor.ref("");
  49. const enterPromise = common_vendor.ref(null);
  50. const enterLifeCyclePromises = common_vendor.ref(null);
  51. const leaveLifeCyclePromises = common_vendor.ref(null);
  52. const style = common_vendor.computed(() => {
  53. return `-webkit-transition-duration:${currentDuration.value}ms;transition-duration:${currentDuration.value}ms;${display.value || !props.destroy ? "" : "display: none;"}${props.customStyle}`;
  54. });
  55. const rootClass = common_vendor.computed(() => {
  56. return `wd-transition ${props.customClass} ${classes.value}`;
  57. });
  58. common_vendor.onBeforeMount(() => {
  59. if (props.show) {
  60. enter();
  61. }
  62. });
  63. common_vendor.watch(
  64. () => props.show,
  65. (newVal) => {
  66. handleShow(newVal);
  67. },
  68. { deep: true }
  69. );
  70. function handleClick() {
  71. emit("click");
  72. }
  73. function handleShow(value) {
  74. if (value) {
  75. handleAbortPromise();
  76. enter();
  77. } else {
  78. leave();
  79. }
  80. }
  81. function handleAbortPromise() {
  82. common_vendor.isPromise(enterPromise.value) && enterPromise.value.abort();
  83. common_vendor.isPromise(enterLifeCyclePromises.value) && enterLifeCyclePromises.value.abort();
  84. common_vendor.isPromise(leaveLifeCyclePromises.value) && leaveLifeCyclePromises.value.abort();
  85. enterPromise.value = null;
  86. enterLifeCyclePromises.value = null;
  87. leaveLifeCyclePromises.value = null;
  88. }
  89. function enter() {
  90. enterPromise.value = new common_vendor.AbortablePromise(async (resolve) => {
  91. try {
  92. const classNames = getClassNames(props.name);
  93. const duration = common_vendor.isObj(props.duration) ? props.duration.enter : props.duration;
  94. status.value = "enter";
  95. emit("before-enter");
  96. enterLifeCyclePromises.value = common_vendor.pause();
  97. await enterLifeCyclePromises.value;
  98. emit("enter");
  99. classes.value = classNames.enter;
  100. currentDuration.value = duration;
  101. enterLifeCyclePromises.value = common_vendor.pause();
  102. await enterLifeCyclePromises.value;
  103. inited.value = true;
  104. display.value = true;
  105. enterLifeCyclePromises.value = common_vendor.pause();
  106. await enterLifeCyclePromises.value;
  107. enterLifeCyclePromises.value = null;
  108. transitionEnded.value = false;
  109. classes.value = classNames["enter-to"];
  110. resolve();
  111. } catch (error) {
  112. }
  113. });
  114. }
  115. async function leave() {
  116. if (!enterPromise.value) {
  117. transitionEnded.value = false;
  118. return onTransitionEnd();
  119. }
  120. try {
  121. await enterPromise.value;
  122. if (!display.value)
  123. return;
  124. const classNames = getClassNames(props.name);
  125. const duration = common_vendor.isObj(props.duration) ? props.duration.leave : props.duration;
  126. status.value = "leave";
  127. emit("before-leave");
  128. currentDuration.value = duration;
  129. leaveLifeCyclePromises.value = common_vendor.pause();
  130. await leaveLifeCyclePromises.value;
  131. emit("leave");
  132. classes.value = classNames.leave;
  133. leaveLifeCyclePromises.value = common_vendor.pause();
  134. await leaveLifeCyclePromises.value;
  135. transitionEnded.value = false;
  136. classes.value = classNames["leave-to"];
  137. leaveLifeCyclePromises.value = setPromise(currentDuration.value);
  138. await leaveLifeCyclePromises.value;
  139. leaveLifeCyclePromises.value = null;
  140. onTransitionEnd();
  141. enterPromise.value = null;
  142. } catch (error) {
  143. }
  144. }
  145. function setPromise(duration) {
  146. return new common_vendor.AbortablePromise((resolve) => {
  147. const timer = setTimeout(() => {
  148. clearTimeout(timer);
  149. resolve();
  150. }, duration);
  151. });
  152. }
  153. function onTransitionEnd() {
  154. if (transitionEnded.value)
  155. return;
  156. transitionEnded.value = true;
  157. if (status.value === "leave") {
  158. emit("after-leave");
  159. } else if (status.value === "enter") {
  160. emit("after-enter");
  161. }
  162. if (!props.show && display.value) {
  163. display.value = false;
  164. }
  165. }
  166. return (_ctx, _cache) => {
  167. return common_vendor.e({
  168. a: !_ctx.lazyRender || inited.value
  169. }, !_ctx.lazyRender || inited.value ? {
  170. b: common_vendor.n(rootClass.value),
  171. c: common_vendor.s(style.value),
  172. d: common_vendor.o(onTransitionEnd),
  173. e: common_vendor.o(handleClick)
  174. } : {});
  175. };
  176. }
  177. });
  178. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-2c25887e"]]);
  179. wx.createComponent(Component);