transition.js 3.4 KB

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