vite-uni-dev-tool 1.1.0 → 1.2.1

package/dist/v3/components/AppTransition/index.vue

@@ -1,176 +1,156 @@
-<template>
-  <view
-    v-if="renderShow"
-    class="transition-root"
-    :class="[showContainer ? 'transition-fixed' : '']"
-    :style="[showContainer ? { zIndex } : {}]">
-    <view
-      class="transition-container"
-      :class="customClass"
-      :style="[mergedStyle, transitionStyle, customStyle]">
-      <view
-        class="transition-content"
-        :class="{ 'pointer-events-auto': isActive && !isLeaving }">
-        <slot></slot>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, computed, nextTick } from 'vue';
-
-const props = withDefaults(
-  defineProps<{
-    show?: boolean;
-    name?:
-      | 'fade'
-      | 'slide-top'
-      | 'slide-bottom'
-      | 'slide-left'
-      | 'slide-right'
-      | 'zoom'
-      | 'reveal';
-    duration?: number;
-    customStyle?: Record<string, any> | string;
-    customClass?: string;
-    zIndex?: number;
-    showContainer?: boolean;
-    origin?: { x: number; y: number };
-    animated?: boolean;
-  }>(),
-  {
-    name: 'fade',
-    duration: 300,
-    showContainer: true,
-    animated: true,
-  },
-);
-
-const emit = defineEmits<{
-  (e: 'after-enter'): void;
-  (e: 'after-leave'): void;
-}>();
-
-const renderShow = ref(props.show);
-const isActive = ref(false);
-const isLeaving = ref(false);
-
-const mergedStyle = computed(() => {
-  return {
-    '--transition-duration': props.animated ? `${props.duration}ms` : '0ms',
-    '--transition-timing': 'cubic-bezier(0.4, 0, 0.2, 1)',
-  };
-});
-
-const transitionStyle = computed(() => {
-  const styles: Record<string, string> = {
-    transition: props.animated
-      ? 'transform var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing), clip-path var(--transition-duration) var(--transition-timing)'
-      : 'none',
-  };
-
-  const active = isActive.value && !isLeaving.value;
-  const x = props.origin?.x || 0;
-  const y = props.origin?.y || 0;
-
-  if (props.origin) {
-    styles.transformOrigin = `${x}px ${y}px`;
-  }
-
-  if (props.name === 'fade') {
-    styles.opacity = active ? '1' : '0';
-  } else if (props.name === 'slide-bottom') {
-    styles.transform = active ? 'translateY(0)' : 'translateY(100%)';
-  } else if (props.name === 'slide-top') {
-    styles.transform = active ? 'translateY(0)' : 'translateY(-100%)';
-  } else if (props.name === 'slide-left') {
-    styles.transform = active ? 'translateX(0)' : 'translateX(-100%)';
-  } else if (props.name === 'slide-right') {
-    styles.transform = active ? 'translateX(0)' : 'translateX(100%)';
-  } else if (props.name === 'zoom') {
-    styles.transform = active ? 'scale(1)' : 'scale(0)';
-    styles.opacity = active ? '1' : '0';
-  } else if (props.name === 'reveal') {
-    styles.clipPath = active
-      ? `circle(150% at ${x}px ${y}px)`
-      : `circle(0% at ${x}px ${y}px)`;
-  }
-
-  return styles;
-});
-
-watch(
-  () => props.show,
-  (val, oldVal) => {
-    if (val) {
-      renderShow.value = true;
-      isLeaving.value = false;
-
-      if (!props.animated) {
-        isActive.value = true;
-        emit('after-enter');
-        return;
-      }
-
-      // 必须分两步：1. 插入DOM 2. 触发Transition
-      nextTick(() => {
-        setTimeout(() => {
-          isActive.value = true;
-          const duration = props.animated ? props.duration : 0;
-          setTimeout(() => {
-            emit('after-enter');
-          }, duration);
-        }, 30);
-      });
-    } else if (oldVal !== undefined) {
-      isLeaving.value = true;
-      isActive.value = false;
-
-      const duration = props.animated ? props.duration : 0;
-
-      setTimeout(() => {
-        renderShow.value = false;
-        isLeaving.value = false;
-        emit('after-leave');
-      }, duration);
-    }
-  },
-  { immediate: true },
-);
-</script>
-
-<style scoped>
-.transition-root {
-  width: 100%;
-  height: 100%;
-}
-
-.transition-container {
-  display: block;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  will-change: transform, opacity;
-  pointer-events: none;
-}
-
-.transition-content {
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.pointer-events-auto {
-  pointer-events: auto;
-}
-
-.transition-fixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-</style>
+<template>
+  <view
+    v-if="renderShow"
+    class="transition-root"
+    :class="[showContainer ? 'transition-fixed' : '']"
+    :style="[showContainer ? { zIndex } : {}]">
+    <view
+      class="transition-container"
+      :class="customClass"
+      :style="[mergedStyle, transitionStyle, customStyle]">
+      <view
+        class="transition-content"
+        :class="{ 'pointer-events-auto': isActive && !isLeaving }">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, nextTick } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    show?: boolean;
+    name?:
+      | 'fade'
+      | 'slide-top'
+      | 'slide-bottom'
+      | 'slide-left'
+      | 'slide-right'
+      | 'zoom'
+      | 'reveal';
+    duration?: number;
+    customStyle?: Record<string, any> | string;
+    customClass?: string;
+    zIndex?: number;
+    showContainer?: boolean;
+    origin?: { x: number; y: number };
+    animated?: boolean;
+  }>(),
+  {
+    name: 'fade',
+    duration: 300,
+    showContainer: true,
+    animated: true,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'after-enter'): void;
+  (e: 'after-leave'): void;
+}>();
+
+const renderShow = ref(props.show);
+const isActive = ref(false);
+const isLeaving = ref(false);
+
+const mergedStyle = computed(() => {
+  return {
+    '--transition-duration': props.animated ? `${props.duration}ms` : '0ms',
+    '--transition-timing': 'cubic-bezier(0.4, 0, 0.2, 1)',
+  };
+});
+
+const transitionStyle = computed(() => {
+  const active = isActive.value && !isLeaving.value;
+  const { x = 0, y = 0 } = props.origin || {};
+  const s: Record<string, string> = {
+    transition: props.animated
+      ? 'transform var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing), clip-path var(--transition-duration) var(--transition-timing)'
+      : 'none',
+  };
+
+  if (props.origin) s.transformOrigin = `${x}px ${y}px`;
+
+  const name = props.name || 'fade';
+  if (name === 'fade') s.opacity = active ? '1' : '0';
+  else if (name === 'zoom') {
+    s.transform = `scale(${active ? 1 : 0})`;
+    s.opacity = active ? '1' : '0';
+  } else if (name === 'reveal')
+    s.clipPath = `circle(${active ? '150%' : '0%'} at ${x}px ${y}px)`;
+  else if (name.startsWith('slide-')) {
+    const dir = name.replace('slide-', '');
+    const axis = dir === 'left' || dir === 'right' ? 'X' : 'Y';
+    const val = dir === 'left' || dir === 'top' ? '-100%' : '100%';
+    s.transform = `translate${axis}(${active ? 0 : val})`;
+  }
+  return s;
+});
+
+watch(
+  () => props.show,
+  (val, old) => {
+    if (val) {
+      renderShow.value = true;
+      isLeaving.value = false;
+      if (!props.animated)
+        return ((isActive.value = true), emit('after-enter'));
+      nextTick(() =>
+        setTimeout(() => {
+          isActive.value = true;
+          setTimeout(() => emit('after-enter'), props.duration);
+        }, 30),
+      );
+    } else if (old !== undefined) {
+      isLeaving.value = true;
+      isActive.value = false;
+      setTimeout(
+        () => {
+          renderShow.value = isLeaving.value = false;
+          emit('after-leave');
+        },
+        props.animated ? props.duration : 0,
+      );
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped>
+.transition-root {
+  width: 100%;
+  height: 100%;
+}
+
+.transition-container {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  will-change: transform, opacity;
+  pointer-events: none;
+}
+
+.transition-content {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.pointer-events-auto {
+  pointer-events: auto;
+}
+
+.transition-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+</style>