transition.js 4.9 KB

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