更新记录

1.0.0（2025-02-06） 下载此版本

发布初版

平台兼容性

Transition 动画过渡

组件名: xt-transition

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

基本用法

<template>
    <view class="xt">
        <xt-transition :show="true" :customStyle="style">
            <view>xt-transition</view>
        </xt-transition>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                style: {
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    zIndex: 999,
                    bottom: 0,
                    'background-color': `rgba(0,0,0,0.7)`,
                    display: 'flex',
                    'justify-content': 'center',
                    'align-items': 'center',
                    'font-size': '40rpx',
                    color: '#fff'
                }
            }

        },
        mounted() {},
        methods: {}
    }
</script>
<style scoped>
    .xt {
        padding: 100rpx 0;
    }
</style>

API

Name可选值

• fade淡入
• zoom缩放
• fade-zoom缩放淡入
• fade-up上滑淡入
• fade-down下滑淡入
• fade-left左滑淡入
• fade-right右滑淡入
• slide-up上滑进入
• slide-down下滑进入
• slide-left左滑进入
• slide-right右滑进入

Events

说明

1. 组件使用 scss 封装.请确保项目中已配置 scss 编译