Home / File/ transition.ts — vue Source File

transition.ts — vue Source File

Architecture documentation for transition.ts, a typescript file in the vue codebase. 5 imports, 2 dependents.

File typescript WebPlatform RuntimeModules 5 imports 2 dependents 8 functions

Entity Profile

Dependency Diagram

graph LR
  b0a7d15f_5bac_dc6f_49fa_0554a1565637["transition.ts"]
  02e43f4a_da65_7acd_5a98_0f017554a159["index"]
  b0a7d15f_5bac_dc6f_49fa_0554a1565637 --> 02e43f4a_da65_7acd_5a98_0f017554a159
  156bf2e1_8a13_f22d_5437_54f14bcef8fa["util"]
  b0a7d15f_5bac_dc6f_49fa_0554a1565637 --> 156bf2e1_8a13_f22d_5437_54f14bcef8fa
  c078cebd_36ee_e879_0a89_19cf4b3ed9a7["index"]
  b0a7d15f_5bac_dc6f_49fa_0554a1565637 --> c078cebd_36ee_e879_0a89_19cf4b3ed9a7
  f6868225_acf7_afdc_ebd3_15704ddb6566["vnode"]
  b0a7d15f_5bac_dc6f_49fa_0554a1565637 --> f6868225_acf7_afdc_ebd3_15704ddb6566
  907f4994_ea28_43b1_7976_0db9f0e97637["component"]
  b0a7d15f_5bac_dc6f_49fa_0554a1565637 --> 907f4994_ea28_43b1_7976_0db9f0e97637
  370f887a_671c_0a30_6345_0f97fc69bd9e["index.ts"]
  370f887a_671c_0a30_6345_0f97fc69bd9e --> b0a7d15f_5bac_dc6f_49fa_0554a1565637
  7c91c607_f320_9fb6_0e00_4e5d50689bec["transition-group.ts"]
  7c91c607_f320_9fb6_0e00_4e5d50689bec --> b0a7d15f_5bac_dc6f_49fa_0554a1565637
  style b0a7d15f_5bac_dc6f_49fa_0554a1565637 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

// Provides transition support for a single element/component.
// supports transition mode (out-in / in-out)

import { warn } from 'core/util/index'
import { camelize, extend, isPrimitive } from 'shared/util'
import {
  mergeVNodeHook,
  isAsyncPlaceholder,
  getFirstComponentChild
} from 'core/vdom/helpers/index'
import VNode from 'core/vdom/vnode'
import type { Component } from 'types/component'

export const transitionProps = {
  name: String,
  appear: Boolean,
  css: Boolean,
  mode: String,
  type: String,
  enterClass: String,
  leaveClass: String,
  enterToClass: String,
  leaveToClass: String,
  enterActiveClass: String,
  leaveActiveClass: String,
  appearClass: String,
  appearActiveClass: String,
  appearToClass: String,
  duration: [Number, String, Object]
}

// in case the child is also an abstract component, e.g. <keep-alive>
// we want to recursively retrieve the real component to be rendered
function getRealChild(vnode?: VNode): VNode | undefined {
  const compOptions = vnode && vnode.componentOptions
  if (compOptions && compOptions.Ctor.options.abstract) {
    return getRealChild(getFirstComponentChild(compOptions.children))
  } else {
    return vnode
  }
}

export function extractTransitionData(comp: Component): Record<string, any> {
  const data = {}
  const options = comp.$options
  // props
  for (const key in options.propsData) {
    data[key] = comp[key]
  }
  // events.
  // extract listeners and pass them directly to the transition methods
  const listeners = options._parentListeners
  for (const key in listeners) {
    data[camelize(key)] = listeners[key]
  }
  return data
}

function placeholder(h: Function, rawChild: VNode): VNode | undefined {
  // @ts-expect-error
// ... (146 more lines)

Domain

Subdomains

Dependencies

  • component
  • index
  • index
  • util
  • vnode

Frequently Asked Questions

What does transition.ts do?
transition.ts is a source file in the vue codebase, written in typescript. It belongs to the WebPlatform domain, RuntimeModules subdomain.
What functions are defined in transition.ts?
transition.ts defines 8 function(s): default.render, extractTransitionData, getRealChild, hasParentTransition, isNotTextNode, isSameChild, isVShowDirective, placeholder.
What does transition.ts depend on?
transition.ts imports 5 module(s): component, index, index, util, vnode.
What files import transition.ts?
transition.ts is imported by 2 file(s): index.ts, transition-group.ts.
Where is transition.ts in the architecture?
transition.ts is located at src/platforms/web/runtime/components/transition.ts (domain: WebPlatform, subdomain: RuntimeModules, directory: src/platforms/web/runtime/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free