element-plus/packages/hooks/use-transition/index.ts

A Component Library for Vue3.0

import { computed, ref, watch, nextTick } from 'vue'

import type { ExtractPropTypes, Ref } from 'vue'

export const useTransitionProps = {
  transitionDuration: {
    type: Number,
    default: 0.3,
  },
  transitionShow: String,
  transitionHide: String,
}

export const useTransition = (
  props: ExtractPropTypes<typeof useTransitionProps>,
  indicator: Ref<boolean>,
) => {
  const transitionState = ref(indicator.value)
  watch(indicator, val => {
    nextTick(() => transitionState.value = val)
  })

  return {
    transition: computed(() => {
      return `el-transition--${
        transitionState.value
          ? props.transitionShow
          : props.transitionHide
      }`
    }),
    transitionStyle: computed(() =>
      `--el-transition-duration: ${props.transitionDuration}s`,
    ),
  }
}