fix(transition): 修复部分环境编译报错 (#462)

xiaohe0601 · web-flow · commit 683ad81d1d9f · 2025-05-16T10:57:07.000+08:00
diff --git a/packages/nutui/components/transition/index.ts b/packages/nutui/components/transition/index.ts
@@ -1,3 +1,3 @@
 export * from './transition'
-export type * from './types'
+export * from './types'
 export * from './use-transition'
diff --git a/packages/nutui/components/transition/transition.ts b/packages/nutui/components/transition/transition.ts
@@ -6,7 +6,8 @@ import type { NutAnimationName, NutAnimationtimingFunction } from './types'
 export const transitionProps = {
   ...commonProps,
   /**
-   * @description 内置动画名称，可选值为 `fade` `fade-up` `fade-down` f`ade-left` `fade-right` `slide-up` `slide-down` `slide-left` `slide-right`
+   * @description 内置动画名称，可选值为
+   * `fade` `fade-up` `fade-down` `fade-left` `fade-right` `slide-up` `slide-down` `slide-left` `slide-right`
    */
   name: makeStringProp<NutAnimationName>('fade'),
   /**
@@ -21,6 +22,9 @@ export const transitionProps = {
    * @description 动画函数
    */
   timingFunction: makeStringProp<NutAnimationtimingFunction>('ease'),
+  /**
+   * @description 关闭后是否销毁内容
+   */
   destroyOnClose: Boolean,
   /**
    * @description 进入动画前的类名
@@ -48,6 +52,8 @@ export const transitionProps = {
   leaveToClass: String,
 }
 
+export type TransitionProps = ExtractPropTypes<typeof transitionProps>
+
 export const transitionEmits = {
   beforeEnter: () => true,
   enter: () => true,
@@ -58,5 +64,4 @@ export const transitionEmits = {
   [CLICK_EVENT]: (evt: MouseEvent) => evt instanceof Object,
 }
 
-export type TransitionProps = ExtractPropTypes<typeof transitionProps>
 export type TransitionEmits = typeof transitionEmits
diff --git a/packages/nutui/components/transition/transition.vue b/packages/nutui/components/transition/transition.vue
@@ -1,16 +1,19 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { defineComponent } from 'vue'
 import { PREFIX } from '../_constants'
 import { transitionEmits, transitionProps } from './transition'
 import { useTransition } from './use-transition'
 
 const props = defineProps(transitionProps)
-const emits = defineEmits(transitionEmits)
-const { display, classes, clickHandler, styles } = useTransition(props, emits)
+
+const emit = defineEmits(transitionEmits)
+
+const { display, classes, styles, clickHandler } = useTransition(props, emit)
 </script>
 
 <script lang="ts">
 const componentName = `${PREFIX}-transition`
+
 export default defineComponent({
   name: componentName,
   options: {
@@ -33,5 +36,5 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
-@import './index';
+@import "./index";
 </style>
diff --git a/packages/nutui/components/transition/types.ts b/packages/nutui/components/transition/types.ts
@@ -9,8 +9,10 @@ export interface NutAnimation {
 
 export const nutAnimationName = ['fade', 'fade-up', 'fade-down', 'fade-left', 'fade-right', 'slide-up', 'slide-down', 'slide-left', 'slide-right', 'zoom', 'none'] as const
 export type NutAnimationName = (typeof nutAnimationName)[number]
+
 export const nutAnimationtimingFunction = ['linear', 'ease', 'ease-in', 'ease-in-out', 'ease-out', 'step-start', 'step-end'] as const
 export type NutAnimationtimingFunction = (typeof nutAnimationtimingFunction)[number]
+
 export interface NutAnimations {
   [key: string]: NutAnimation
 }
diff --git a/packages/nutui/components/transition/use-transition.ts b/packages/nutui/components/transition/use-transition.ts
@@ -5,6 +5,24 @@ import { getMainClass, getMainStyle } from '../_utils'
 import type { TransitionEmits, TransitionProps } from './transition'
 import type { NutAnimations } from './types'
 
+export interface IClassNames {
+  enter: string
+  enterActive: string
+  enterTo: string
+  leave: string
+  leaveActive: string
+  leaveTo: string
+}
+
+export interface IClassNameProps {
+  enterClass?: string
+  enterActiveClass?: string
+  enterToClass?: string
+  leaveClass?: string
+  leaveActiveClass?: string
+  leaveToClass?: string
+}
+
 export const defaultAnimations: NutAnimations = {
   'fade': {
     enter: 'nutFadeIn',
@@ -46,34 +64,14 @@ export const defaultAnimations: NutAnimations = {
     enter: 'nutZoomIn',
     leave: 'nutZoomOut',
   },
-
 }
-const componentName = `${PREFIX}-transition`
 
 export function isKeyOfAnimations(value: string) {
   const keys = Object.keys(defaultAnimations)
 
   return keys.includes(value)
 }
 
-export interface IClassNames {
-  enter: string
-  enterActive: string
-  enterTo: string
-  leave: string
-  leaveActive: string
-  leaveTo: string
-}
-
-export interface IClassNameProps {
-  enterClass?: string
-  enterActiveClass?: string
-  enterToClass?: string
-  leaveClass?: string
-  leaveActiveClass?: string
-  leaveToClass?: string
-}
-
 function getDefaultClassNames(name: string) {
   return {
     enter: `${name}-enter-from`,
@@ -94,6 +92,7 @@ export function getClassNames(name: string, {
   leaveToClass,
 }: IClassNameProps): IClassNames {
   const defaultClassNames = getDefaultClassNames(name)
+
   return {
     enter: enterClass || defaultClassNames.enter,
     enterActive: enterActiveClass || defaultClassNames.enterActive,
@@ -104,8 +103,11 @@ export function getClassNames(name: string, {
   }
 }
 
+const componentName = `${PREFIX}-transition`
+
 export function useTransition(props: TransitionProps, emit: SetupContext<TransitionEmits>['emit']) {
   const display = ref(false)
+
   const name = computed(() => props.name || 'fade')
   const duration = computed(() => props.duration || 200)
 
@@ -125,61 +127,87 @@ export function useTransition(props: TransitionProps, emit: SetupContext<Transit
   async function enter() {
     if (display.value)
       return
+
     emit('beforeEnter')
+
     display.value = true
-    animationClass.value = defaultAnimations[name.value]?.enter ? defaultAnimations[name.value]?.enter : `${classNames.value.enter} ${classNames.value.enterActive}`
+
+    const animation = defaultAnimations[name.value]
+    if (animation != null) {
+      animationClass.value = animation.enter
+    }
+    else {
+      animationClass.value = `${classNames.value.enter} ${classNames.value.enterActive}`
+    }
+
     await nextTick()
+
     emit('enter')
 
     setTimeout(() => {
       if (!isKeyOfAnimations(props.name))
         animationClass.value = classNames.value.enterTo
+
       emit('afterEnter')
     }, duration.value)
   }
 
   async function leave() {
     if (!display.value)
       return
+
     emit('beforeLeave')
-    animationClass.value = defaultAnimations[name.value]?.leave ? defaultAnimations[name.value]?.leave : `${classNames.value.leave} ${classNames.value.leaveActive}`
+
+    const animation = defaultAnimations[name.value]
+    if (animation != null) {
+      animationClass.value = animation.leave
+    }
+    else {
+      animationClass.value = `${classNames.value.leave} ${classNames.value.leaveActive}`
+    }
+
     await nextTick()
+
     emit('leave')
 
     setTimeout(() => {
       if (!props.show && display.value)
         display.value = false
+
       if (!isKeyOfAnimations(props.name))
         animationClass.value = classNames.value.leaveTo
+
       emit('afterLeave')
     }, duration.value)
   }
 
-  watch(
-    () => props.show,
-    (val) => {
-      val ? enter() : leave()
-    },
-    { immediate: true },
-  )
-
-  function clickHandler(evt: any) {
-    // evt.stopPropagation()
-    emit(CLICK_EVENT, evt)
-  }
+  watch(() => props.show, (value) => {
+    if (value) {
+      void enter()
+    }
+    else {
+      void leave()
+    }
+  }, { immediate: true })
 
   const classes = computed(() => {
     return getMainClass(props, componentName, {
       [animationClass.value]: true,
       'nut-hidden': !display.value,
     })
   })
+
   const styles = computed(() => {
     return getMainStyle(props, {
       'animation-duration': isKeyOfAnimations(props.name) ? `${props.duration}ms` : '',
       'animation-timing-function': isKeyOfAnimations(props.name) ? props.timingFunction : '',
     })
   })
+
+  function clickHandler(event: any) {
+    emit(CLICK_EVENT, event)
+  }
+
   return {
     display,
     classes,
