@atooyu/uxto-ui 1.0.7 → 1.0.9

package/src/components/u-transition/u-transition.vue

@@ -1,216 +1,216 @@
-<template>
-  <view
-    v-show="visible"
-    class="u-transition"
-    :class="transitionClass"
-    :style="transitionStyle"
-    @transitionend="onTransitionEnd"
-  >
-    <slot />
-  </view>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-
-type TransitionMode =
-  | 'fade'
-  | 'fade-up'
-  | 'fade-down'
-  | 'fade-left'
-  | 'fade-right'
-  | 'slide-up'
-  | 'slide-down'
-  | 'slide-left'
-  | 'slide-right'
-  | 'zoom'
-  | 'zoom-fade'
-
-interface Props {
-  show?: boolean
-  mode?: TransitionMode
-  duration?: number
-  delay?: number
-  customStyle?: Record<string, string | number>
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  show: false,
-  mode: 'fade',
-  duration: 300,
-  delay: 0
-})
-
-const emit = defineEmits<{
-  (e: 'after-enter'): void
-  (e: 'after-leave'): void
-}>()
-
-const visible = ref(false)
-const animationPhase = ref<'enter' | 'leave'>('enter')
-
-// 监听 show 变化
-watch(
-  () => props.show,
-  (val) => {
-    if (val) {
-      visible.value = true
-      animationPhase.value = 'enter'
-    } else {
-      animationPhase.value = 'leave'
-    }
-  },
-  { immediate: true }
-)
-
-const transitionClass = computed(() => {
-  const classes: string[] = []
-
-  if (animationPhase.value === 'enter') {
-    classes.push(`u-transition--${props.mode}-enter`)
-  } else {
-    classes.push(`u-transition--${props.mode}-leave`)
-  }
-
-  return classes
-})
-
-const transitionStyle = computed(() => {
-  const style: Record<string, string | number> = {
-    transitionDuration: `${props.duration}ms`,
-    transitionDelay: `${props.delay}ms`,
-    transitionProperty: 'opacity, transform',
-    transitionTimingFunction: 'ease-out'
-  }
-
-  if (props.customStyle) {
-    Object.assign(style, props.customStyle)
-  }
-
-  return style
-})
-
-const onTransitionEnd = () => {
-  if (animationPhase.value === 'leave') {
-    visible.value = false
-    emit('after-leave')
-  } else {
-    emit('after-enter')
-  }
-}
-</script>
-
-<script lang="ts">
-export default {
-  options: {
-    virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.u-transition {
-  // 基础状态
-  opacity: 1;
-  transform: none;
-
-  // 淡入淡出
-  &--fade-enter {
-    opacity: 0;
-  }
-  &--fade-leave {
-    opacity: 0;
-  }
-
-  // 上滑淡入
-  &--fade-up-enter {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-  &--fade-up-leave {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-
-  // 下滑淡入
-  &--fade-down-enter {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-  &--fade-down-leave {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-
-  // 左滑淡入
-  &--fade-left-enter {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-  &--fade-left-leave {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-
-  // 右滑淡入
-  &--fade-right-enter {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-  &--fade-right-leave {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-
-  // 上滑进入
-  &--slide-up-enter {
-    transform: translateY(100%);
-  }
-  &--slide-up-leave {
-    transform: translateY(-100%);
-  }
-
-  // 下滑进入
-  &--slide-down-enter {
-    transform: translateY(-100%);
-  }
-  &--slide-down-leave {
-    transform: translateY(100%);
-  }
-
-  // 左滑进入
-  &--slide-left-enter {
-    transform: translateX(100%);
-  }
-  &--slide-left-leave {
-    transform: translateX(-100%);
-  }
-
-  // 右滑进入
-  &--slide-right-enter {
-    transform: translateX(-100%);
-  }
-  &--slide-right-leave {
-    transform: translateX(100%);
-  }
-
-  // 缩放
-  &--zoom-enter {
-    transform: scale(0);
-  }
-  &--zoom-leave {
-    transform: scale(0);
-  }
-
-  // 缩放淡入
-  &--zoom-fade-enter {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-  &--zoom-fade-leave {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-}
+<template>
+  <view
+    v-show="visible"
+    class="u-transition"
+    :class="transitionClass"
+    :style="transitionStyle"
+    @transitionend="onTransitionEnd"
+  >
+    <slot />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+type TransitionMode =
+  | 'fade'
+  | 'fade-up'
+  | 'fade-down'
+  | 'fade-left'
+  | 'fade-right'
+  | 'slide-up'
+  | 'slide-down'
+  | 'slide-left'
+  | 'slide-right'
+  | 'zoom'
+  | 'zoom-fade'
+
+interface Props {
+  show?: boolean
+  mode?: TransitionMode
+  duration?: number
+  delay?: number
+  customStyle?: Record<string, string | number>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  show: false,
+  mode: 'fade',
+  duration: 300,
+  delay: 0
+})
+
+const emit = defineEmits<{
+  (e: 'after-enter'): void
+  (e: 'after-leave'): void
+}>()
+
+const visible = ref(false)
+const animationPhase = ref<'enter' | 'leave'>('enter')
+
+// 监听 show 变化
+watch(
+  () => props.show,
+  (val) => {
+    if (val) {
+      visible.value = true
+      animationPhase.value = 'enter'
+    } else {
+      animationPhase.value = 'leave'
+    }
+  },
+  { immediate: true }
+)
+
+const transitionClass = computed(() => {
+  const classes: string[] = []
+
+  if (animationPhase.value === 'enter') {
+    classes.push(`u-transition--${props.mode}-enter`)
+  } else {
+    classes.push(`u-transition--${props.mode}-leave`)
+  }
+
+  return classes
+})
+
+const transitionStyle = computed(() => {
+  const style: Record<string, string | number> = {
+    transitionDuration: `${props.duration}ms`,
+    transitionDelay: `${props.delay}ms`,
+    transitionProperty: 'opacity, transform',
+    transitionTimingFunction: 'ease-out'
+  }
+
+  if (props.customStyle) {
+    Object.assign(style, props.customStyle)
+  }
+
+  return style
+})
+
+const onTransitionEnd = () => {
+  if (animationPhase.value === 'leave') {
+    visible.value = false
+    emit('after-leave')
+  } else {
+    emit('after-enter')
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-transition {
+  // 基础状态
+  opacity: 1;
+  transform: none;
+
+  // 淡入淡出
+  &--fade-enter {
+    opacity: 0;
+  }
+  &--fade-leave {
+    opacity: 0;
+  }
+
+  // 上滑淡入
+  &--fade-up-enter {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  &--fade-up-leave {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+
+  // 下滑淡入
+  &--fade-down-enter {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  &--fade-down-leave {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  // 左滑淡入
+  &--fade-left-enter {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  &--fade-left-leave {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  // 右滑淡入
+  &--fade-right-enter {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  &--fade-right-leave {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  // 上滑进入
+  &--slide-up-enter {
+    transform: translateY(100%);
+  }
+  &--slide-up-leave {
+    transform: translateY(-100%);
+  }
+
+  // 下滑进入
+  &--slide-down-enter {
+    transform: translateY(-100%);
+  }
+  &--slide-down-leave {
+    transform: translateY(100%);
+  }
+
+  // 左滑进入
+  &--slide-left-enter {
+    transform: translateX(100%);
+  }
+  &--slide-left-leave {
+    transform: translateX(-100%);
+  }
+
+  // 右滑进入
+  &--slide-right-enter {
+    transform: translateX(-100%);
+  }
+  &--slide-right-leave {
+    transform: translateX(100%);
+  }
+
+  // 缩放
+  &--zoom-enter {
+    transform: scale(0);
+  }
+  &--zoom-leave {
+    transform: scale(0);
+  }
+
+  // 缩放淡入
+  &--zoom-fade-enter {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  &--zoom-fade-leave {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
 </style>