transition.js 4.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  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-" + name + "-enter van-" + name + "-enter-active enter-class enter-active-class",
  9. 'enter-to': "van-" + name + "-enter-to van-" + name + "-enter-active enter-to-class enter-active-class",
  10. leave: "van-" + name + "-leave van-" + name + "-leave-active leave-class leave-active-class",
  11. 'leave-to': "van-" + name + "-leave-to van-" + 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. observer: 'observeDuration',
  28. },
  29. name: {
  30. type: String,
  31. value: 'fade',
  32. },
  33. },
  34. data: {
  35. type: '',
  36. inited: false,
  37. display: false,
  38. },
  39. ready: function () {
  40. if (this.data.show === true) {
  41. this.observeShow(true, false);
  42. }
  43. },
  44. methods: {
  45. observeShow: function (value, old) {
  46. if (value === old) {
  47. return;
  48. }
  49. value ? this.enter() : this.leave();
  50. },
  51. enter: function () {
  52. var _this = this;
  53. var _a = this.data, duration = _a.duration, name = _a.name;
  54. var classNames = getClassNames(name);
  55. var currentDuration = validator_1.isObj(duration) ? duration.enter : duration;
  56. this.status = 'enter';
  57. this.$emit('before-enter');
  58. utils_1.requestAnimationFrame(function () {
  59. if (_this.status !== 'enter') {
  60. return;
  61. }
  62. _this.$emit('enter');
  63. _this.setData({
  64. inited: true,
  65. display: true,
  66. classes: classNames.enter,
  67. currentDuration: currentDuration,
  68. });
  69. utils_1.requestAnimationFrame(function () {
  70. if (_this.status !== 'enter') {
  71. return;
  72. }
  73. _this.transitionEnded = false;
  74. _this.setData({ classes: classNames['enter-to'] });
  75. });
  76. });
  77. },
  78. leave: function () {
  79. var _this = this;
  80. if (!this.data.display) {
  81. return;
  82. }
  83. var _a = this.data, duration = _a.duration, name = _a.name;
  84. var classNames = getClassNames(name);
  85. var currentDuration = validator_1.isObj(duration) ? duration.leave : duration;
  86. this.status = 'leave';
  87. this.$emit('before-leave');
  88. utils_1.requestAnimationFrame(function () {
  89. if (_this.status !== 'leave') {
  90. return;
  91. }
  92. _this.$emit('leave');
  93. _this.setData({
  94. classes: classNames.leave,
  95. currentDuration: currentDuration,
  96. });
  97. utils_1.requestAnimationFrame(function () {
  98. if (_this.status !== 'leave') {
  99. return;
  100. }
  101. _this.transitionEnded = false;
  102. setTimeout(function () { return _this.onTransitionEnd(); }, currentDuration);
  103. _this.setData({ classes: classNames['leave-to'] });
  104. });
  105. });
  106. },
  107. onTransitionEnd: function () {
  108. if (this.transitionEnded) {
  109. return;
  110. }
  111. this.transitionEnded = true;
  112. this.$emit("after-" + this.status);
  113. var _a = this.data, show = _a.show, display = _a.display;
  114. if (!show && display) {
  115. this.setData({ display: false });
  116. }
  117. },
  118. },
  119. });
  120. }
  121. exports.transition = transition;