transition.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. var utils_1 = require("../common/utils");
  4. var getClassNames = function (name) { return ({
  5. enter: "van-" + name + "-enter van-" + name + "-enter-active enter-class enter-active-class",
  6. 'enter-to': "van-" + name + "-enter-to van-" + name + "-enter-active enter-to-class enter-active-class",
  7. leave: "van-" + name + "-leave van-" + name + "-leave-active leave-class leave-active-class",
  8. 'leave-to': "van-" + name + "-leave-to van-" + name + "-leave-active leave-to-class leave-active-class"
  9. }); };
  10. var nextTick = function () { return new Promise(function (resolve) { return setTimeout(resolve, 1000 / 30); }); };
  11. exports.transition = function (showDefaultValue) {
  12. return Behavior({
  13. properties: {
  14. customStyle: String,
  15. // @ts-ignore
  16. show: {
  17. type: Boolean,
  18. value: showDefaultValue,
  19. observer: 'observeShow'
  20. },
  21. // @ts-ignore
  22. duration: {
  23. type: [Number, Object],
  24. value: 300,
  25. observer: 'observeDuration'
  26. },
  27. name: {
  28. type: String,
  29. value: 'fade'
  30. }
  31. },
  32. data: {
  33. type: '',
  34. inited: false,
  35. display: false
  36. },
  37. attached: function () {
  38. if (this.data.show) {
  39. this.enter();
  40. }
  41. },
  42. methods: {
  43. observeShow: function (value) {
  44. if (value) {
  45. this.enter();
  46. }
  47. else {
  48. this.leave();
  49. }
  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 = utils_1.isObj(duration) ? duration.enter : duration;
  56. this.status = 'enter';
  57. Promise.resolve()
  58. .then(nextTick)
  59. .then(function () {
  60. _this.checkStatus('enter');
  61. _this.set({
  62. inited: true,
  63. display: true,
  64. classes: classNames.enter,
  65. currentDuration: currentDuration
  66. });
  67. })
  68. .then(nextTick)
  69. .then(function () {
  70. _this.checkStatus('enter');
  71. _this.set({
  72. classes: classNames['enter-to']
  73. });
  74. })
  75. .catch(function () { });
  76. },
  77. leave: function () {
  78. var _this = this;
  79. var _a = this.data, duration = _a.duration, name = _a.name;
  80. var classNames = getClassNames(name);
  81. var currentDuration = utils_1.isObj(duration) ? duration.leave : duration;
  82. this.status = 'leave';
  83. Promise.resolve()
  84. .then(nextTick)
  85. .then(function () {
  86. _this.checkStatus('leave');
  87. _this.set({
  88. classes: classNames.leave,
  89. currentDuration: currentDuration
  90. });
  91. })
  92. .then(function () { return setTimeout(function () { return _this.onTransitionEnd(); }, currentDuration); })
  93. .then(nextTick)
  94. .then(function () {
  95. _this.checkStatus('leave');
  96. _this.set({
  97. classes: classNames['leave-to']
  98. });
  99. })
  100. .catch(function () { });
  101. },
  102. checkStatus: function (status) {
  103. if (status !== this.status) {
  104. throw new Error("incongruent status: " + status);
  105. }
  106. },
  107. onTransitionEnd: function () {
  108. if (!this.data.show) {
  109. this.set({ display: false });
  110. this.$emit('transitionEnd');
  111. }
  112. }
  113. }
  114. });
  115. };