1
import { FunctionalComponentOptions, VNode, VNodeData } from 'vue'
2
import mergeData from '../../util/mergeData'
3

4
function mergeTransitions (
5 1
  dest: Function | Function[] = [],
6
  ...transitions: (Function | Function[])[]
7 0
) {
8
  /* eslint-disable-next-line no-array-constructor */
9 0
  return Array<Function>().concat(dest, ...transitions)
10
}
11

12
export function createSimpleTransition (
13
  name: string,
14 1
  origin = 'top center 0',
15
  mode?: string
16 1
): FunctionalComponentOptions {
17 1
  return {
18
    name,
19

20
    functional: true,
21

22
    props: {
23
      group: {
24
        type: Boolean,
25
        default: false,
26
      },
27
      hideOnLeave: {
28
        type: Boolean,
29
        default: false,
30
      },
31
      leaveAbsolute: {
32
        type: Boolean,
33
        default: false,
34
      },
35
      mode: {
36
        type: String,
37
        default: mode,
38
      },
39
      origin: {
40
        type: String,
41
        default: origin,
42
      },
43
    },
44

45 1
    render (h, context): VNode {
46 1
      const tag = `transition${context.props.group ? '-group' : ''}`
47 1
      const data: VNodeData = {
48
        props: {
49
          name,
50
          mode: context.props.mode,
51
        },
52
        on: {
53 0
          beforeEnter (el: HTMLElement) {
54 0
            el.style.transformOrigin = context.props.origin
55 0
            el.style.webkitTransformOrigin = context.props.origin
56
          },
57
        },
58
      }
59

60 1
      if (context.props.leaveAbsolute) {
61 0
        data.on!.leave = mergeTransitions(data.on!.leave, (el: HTMLElement) => (el.style.position = 'absolute'))
62
      }
63 1
      if (context.props.hideOnLeave) {
64 0
        data.on!.leave = mergeTransitions(data.on!.leave, (el: HTMLElement) => (el.style.display = 'none'))
65
      }
66

67 1
      return h(tag, mergeData(context.data, data), context.children)
68
    },
69
  }
70
}
71

72
export function createJavascriptTransition (
73
  name: string,
74
  functions: Record<string, any>,
75 1
  mode = 'in-out'
76 1
): FunctionalComponentOptions {
77 1
  return {
78
    name,
79

80
    functional: true,
81

82
    props: {
83
      mode: {
84
        type: String,
85
        default: mode,
86
      },
87
    },
88

89 1
    render (h, context): VNode {
90 1
      return h(
91
        'transition',
92
        mergeData(context.data, {
93
          props: { name },
94
          on: functions,
95
        }),
96
        context.children
97
      )
98
    },
99
  }
100
}

Read our documentation on viewing source code .

Loading