transition.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.transition = void 0;
  4. // @ts-nocheck
  5. var utils_1 = require("../common/utils");
  6. var validator_1 = require("../common/validator");
  7. var getClassNames = function (name) { return ({
  8. enter: "van-".concat(name, "-enter van-").concat(name, "-enter-active enter-class enter-active-class"),
  9. 'enter-to': "van-".concat(name, "-enter-to van-").concat(name, "-enter-active enter-to-class enter-active-class"),
  10. leave: "van-".concat(name, "-leave van-").concat(name, "-leave-active leave-class leave-active-class"),
  11. 'leave-to': "van-".concat(name, "-leave-to van-").concat(name, "-leave-active leave-to-class leave-active-class"),
  12. }); };
  13. function transition(showDefaultValue) {
  14. return Behavior({
  15. properties: {
  16. customStyle: String,
  17. // @ts-ignore
  18. show: {
  19. type: Boolean,
  20. value: showDefaultValue,
  21. observer: 'observeShow',
  22. },
  23. // @ts-ignore
  24. duration: {
  25. type: null,
  26. value: 300,
  27. },
  28. name: {
  29. type: String,
  30. value: 'fade',
  31. },
  32. },
  33. data: {
  34. type: '',
  35. inited: false,
  36. display: false,
  37. },
  38. ready: function () {
  39. if (this.data.show === true) {
  40. this.observeShow(true, false);
  41. }
  42. },
  43. methods: {
  44. observeShow: function (value, old) {
  45. if (value === old) {
  46. return;
  47. }
  48. value ? this.enureEnter() : this.enureLeave();
  49. },
  50. enureEnter: function () {
  51. var _this = this;
  52. if (this.enterPromise)
  53. return;
  54. this.enterPromise = new Promise(function (resolve) { return _this.enter(resolve); });
  55. },
  56. enureLeave: function () {
  57. var _this = this;
  58. var enterPromise = this.enterPromise;
  59. if (!enterPromise)
  60. return;
  61. enterPromise
  62. .then(function () { return new Promise(function (resolve) { return _this.leave(resolve); }); })
  63. .then(function () {
  64. _this.enterPromise = null;
  65. });
  66. },
  67. enter: function (resolve) {
  68. var _this = this;
  69. var _a = this.data, duration = _a.duration, name = _a.name;
  70. var classNames = getClassNames(name);
  71. var currentDuration = (0, validator_1.isObj)(duration) ? duration.enter : duration;
  72. if (this.status === 'enter') {
  73. return;
  74. }
  75. this.status = 'enter';
  76. this.$emit('before-enter');
  77. (0, utils_1.requestAnimationFrame)(function () {
  78. if (_this.status !== 'enter') {
  79. return;
  80. }
  81. _this.$emit('enter');
  82. _this.setData({
  83. inited: true,
  84. display: true,
  85. classes: classNames.enter,
  86. currentDuration: currentDuration,
  87. });
  88. (0, utils_1.requestAnimationFrame)(function () {
  89. if (_this.status !== 'enter') {
  90. return;
  91. }
  92. _this.transitionEnded = false;
  93. _this.setData({ classes: classNames['enter-to'] });
  94. resolve();
  95. });
  96. });
  97. },
  98. leave: function (resolve) {
  99. var _this = this;
  100. if (!this.data.display) {
  101. return;
  102. }
  103. var _a = this.data, duration = _a.duration, name = _a.name;
  104. var classNames = getClassNames(name);
  105. var currentDuration = (0, validator_1.isObj)(duration) ? duration.leave : duration;
  106. this.status = 'leave';
  107. this.$emit('before-leave');
  108. (0, utils_1.requestAnimationFrame)(function () {
  109. if (_this.status !== 'leave') {
  110. return;
  111. }
  112. _this.$emit('leave');
  113. _this.setData({
  114. classes: classNames.leave,
  115. currentDuration: currentDuration,
  116. });
  117. (0, utils_1.requestAnimationFrame)(function () {
  118. if (_this.status !== 'leave') {
  119. return;
  120. }
  121. _this.transitionEnded = false;
  122. setTimeout(function () {
  123. _this.onTransitionEnd();
  124. resolve();
  125. }, currentDuration);
  126. _this.setData({ classes: classNames['leave-to'] });
  127. });
  128. });
  129. },
  130. onTransitionEnd: function () {
  131. if (this.transitionEnded) {
  132. return;
  133. }
  134. this.transitionEnded = true;
  135. this.$emit("after-".concat(this.status));
  136. var _a = this.data, show = _a.show, display = _a.display;
  137. if (!show && display) {
  138. this.setData({ display: false });
  139. }
  140. },
  141. },
  142. });
  143. }
  144. exports.transition = transition;