transition.js 3.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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: [Number, Object],
  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. attached() {
  36. if (this.data.show) {
  37. this.enter();
  38. }
  39. },
  40. methods: {
  41. observeShow(value) {
  42. if (value) {
  43. this.enter();
  44. }
  45. else {
  46. this.leave();
  47. }
  48. },
  49. enter() {
  50. const { duration, name } = this.data;
  51. const classNames = getClassNames(name);
  52. const currentDuration = isObj(duration) ? duration.enter : duration;
  53. this.status = 'enter';
  54. Promise.resolve()
  55. .then(nextTick)
  56. .then(() => {
  57. this.checkStatus('enter');
  58. this.set({
  59. inited: true,
  60. display: true,
  61. classes: classNames.enter,
  62. currentDuration
  63. });
  64. })
  65. .then(nextTick)
  66. .then(() => {
  67. this.checkStatus('enter');
  68. this.set({
  69. classes: classNames['enter-to']
  70. });
  71. })
  72. .catch(() => { });
  73. },
  74. leave() {
  75. const { duration, name } = this.data;
  76. const classNames = getClassNames(name);
  77. const currentDuration = isObj(duration) ? duration.leave : duration;
  78. this.status = 'leave';
  79. Promise.resolve()
  80. .then(nextTick)
  81. .then(() => {
  82. this.checkStatus('leave');
  83. this.set({
  84. classes: classNames.leave,
  85. currentDuration
  86. });
  87. })
  88. .then(() => setTimeout(() => this.onTransitionEnd(), currentDuration))
  89. .then(nextTick)
  90. .then(() => {
  91. this.checkStatus('leave');
  92. this.set({
  93. classes: classNames['leave-to']
  94. });
  95. })
  96. .catch(() => { });
  97. },
  98. checkStatus(status) {
  99. if (status !== this.status) {
  100. throw new Error(`incongruent status: ${status}`);
  101. }
  102. },
  103. onTransitionEnd() {
  104. if (!this.data.show) {
  105. this.set({ display: false });
  106. this.$emit('transitionEnd');
  107. }
  108. }
  109. }
  110. });
  111. };