Vant-Pro

主题切换

TransitionPro 过渡 ​

介绍 ​

主要用于元素显示、隐藏、切换等过渡效果，支持单个元素和多个元素过渡，基于 vue3 的组件进行二次封装。使用了以下组件：

引入 ​

全局注册:

ts
import { createApp } from "vue"
import { TransitionPro } from "@dyb-dev/vant-pro"

const app = createApp()
app.use(TransitionPro)

代码演示 ​

源代码 ⬇️
<script setup lang="ts">
import { App, Button, Space } from "ant-design-vue"
import { Image } from "vant"
import { computed, ref } from "vue"

import { TransitionPro } from "@dyb-dev/vant-pro"

import CellPhoneBox from "@/components/CellPhoneBox.vue"

/** REF: 是否显示 */
const show = ref(false)

/** COMPUTED: 进入时 x 位移量 */
const enterX = computed(() => show.value ? "100%" : "-100%")

/** COMPUTED: 离开时 x 位移量 */
const leaveX = computed(() => show.value ? "-100%" : "100%")

/** EVENT: 模拟页面切换 */
const onClickButton = () => {

    show.value = !show.value

}
</script>

<template>
    <App>
        <Space style="width: 100%" direction="vertical" size="middle">
            <Button type="primary" @click="onClickButton">页面切换</Button>

            <CellPhoneBox class="cell-phone-box" ref="cellPhoneBox">
                <TransitionPro :time="0.5" easing="ease" mode="out-in">
                    <Image
                        v-if="show"
                        width="100%"
                        height="100%"
                        fit="cover"
                        round
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                    />

                    <Image
                        v-else
                        width="100%"
                        height="100%"
                        fit="cover"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                    />
                </TransitionPro>
            </CellPhoneBox>
        </Space>
    </App>
</template>

<style lang="scss">
.vant-pro-transition-pro {
    &-enter {
        transform: translateX(v-bind(enterX));
        opacity: 0;
    }

    &-leave-to {
        transform: translateX(v-bind(leaveX));
        opacity: 0;
    }
}
</style>

Props ​

提示

下方展示的是新增的扩展选项，其他选项还请查看 vue3 的 Transition、TransitionGroup 组件

参数说明类型默认值
time过渡时间，单位:秒number0.3
easing过渡曲线模式TEasing"ease-out"
enableListTransition是否启用列表过渡booleanfalse

Slots ​

名称说明
default用于存放需要过渡的元素

类型定义 ​

组件导出以下类型定义：

ts
import type { TTransitionProEasing, ITransitionProProps } from "@dyb-dev/vant-pro"