transition.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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. show: {
  16. type: Boolean,
  17. value: showDefaultValue,
  18. observer: 'observeShow'
  19. },
  20. duration: {
  21. type: [Number, Object],
  22. value: 300,
  23. observer: 'observeDuration'
  24. },
  25. name: {
  26. type: String,
  27. value: 'fade',
  28. observer: 'updateClasses'
  29. }
  30. },
  31. data: {
  32. type: '',
  33. inited: false,
  34. display: false,
  35. classNames: getClassNames('fade')
  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. updateClasses: function (name) {
  52. this.set({
  53. classNames: getClassNames(name)
  54. });
  55. },
  56. enter: function () {
  57. var _this = this;
  58. var _a = this.data, classNames = _a.classNames, duration = _a.duration;
  59. var currentDuration = utils_1.isObj(duration) ? duration.leave : duration;
  60. this.status = 'enter';
  61. Promise.resolve()
  62. .then(nextTick)
  63. .then(function () {
  64. _this.checkStatus('enter');
  65. _this.set({
  66. inited: true,
  67. display: true,
  68. classes: classNames.enter,
  69. currentDuration: currentDuration
  70. });
  71. })
  72. .then(nextTick)
  73. .then(function () {
  74. _this.checkStatus('enter');
  75. _this.set({
  76. classes: classNames['enter-to']
  77. });
  78. })
  79. .catch(function () { });
  80. },
  81. leave: function () {
  82. var _this = this;
  83. var _a = this.data, classNames = _a.classNames, duration = _a.duration;
  84. var currentDuration = utils_1.isObj(duration) ? duration.leave : duration;
  85. this.status = 'leave';
  86. Promise.resolve()
  87. .then(nextTick)
  88. .then(function () {
  89. _this.checkStatus('leave');
  90. _this.set({
  91. classes: classNames.leave,
  92. currentDuration: currentDuration
  93. });
  94. })
  95. .then(function () { return setTimeout(function () { return _this.onTransitionEnd(); }, currentDuration); })
  96. .then(nextTick)
  97. .then(function () {
  98. _this.checkStatus('leave');
  99. _this.set({
  100. classes: classNames['leave-to']
  101. });
  102. })
  103. .catch(function () { });
  104. },
  105. checkStatus: function (status) {
  106. if (status !== this.status) {
  107. throw new Error("incongruent status: " + status);
  108. }
  109. },
  110. onTransitionEnd: function () {
  111. if (!this.data.show) {
  112. this.set({ display: false });
  113. this.$emit('transitionEnd');
  114. }
  115. }
  116. }
  117. });
  118. };