Skip to content
On this page

组件库文档 tmui.design

动画 Translate

提供了6组动画,并且每组件动画都支持反转播放,相当于12组动画了。可用于任何元素,进入场和出场的动画。


🌶️ 动画 Translate 示例

查看模拟效果
示例模板
vue
<template>
    <tm-app>

        <tm-sheet>
            <tm-text :font-size="24" _class="font-weight-b" label="下面是基础演示属性,更多玩法请前往文档。"></tm-text>
            <tm-text color="red" _class="font-weight-b" label="一共6组动效,每组动效都可以反向播放。手动或者自动控制详见文档。本组件库所有动效都是由下面6组动效完成。"></tm-text>
            <tm-divider></tm-divider>
            <view class="flex flex-row flex-wrap ">
                <tm-translate  ref="translate" name="fade">
                    <tm-sheet color="blue" :padding="[0, 0]" :width="100" :height="100">
					</tm-sheet>
                </tm-translate>
                <tm-translate v-if="test" name="zoom">
                    <tm-sheet color="blue" :padding="[0, 0]" :width="100" :height="100"></tm-sheet>
                </tm-translate>
                <tm-translate name="left">
                    <tm-sheet color="blue" :padding="[0, 0]" :width="100" :height="100"></tm-sheet>
                </tm-translate>
                <tm-translate name="right">
                    <tm-sheet color="blue" :padding="[0, 0]" :width="100" :height="100"></tm-sheet>
                </tm-translate>
            </view>
            <view class="flex flex-row flex-wrap ">
                <tm-translate name="down">
                    <tm-sheet color="blue" :padding="[0, 0]" :width="100" :height="100"></tm-sheet>
                </tm-translate>
                <tm-translate name="up">
                    <tm-sheet color="blue" :padding="[0, 0]" :width="100" :height="100"></tm-sheet>
                </tm-translate>
            </view>
        </tm-sheet>
        
    </tm-app>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app";
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmTranslate from "@/tmui/components/tm-translate/tm-translate.vue"
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
const translate = ref<InstanceType<typeof tmTranslate> | null>(null)
const  test = ref(false)
setTimeout(()=>{
	test.value = true
},1500)
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
durationNumber200动画时长,任意整数
delayNumber0延时多少毫秒开始播放,任意整数
nameStringfade动画效果名称,可选值 fade,left,right,up,down,zoom
autoPlayBooleantrue是否自动播放动画
disabledBooleanfalse是否禁用
height[Number,String]0高度,单位rpx,0表示自动宽高
width[Number,String]0宽度,单位rpx,0表示自动宽高
reverse[Boolean,String]false是否反向动画

🌹 事件

事件名参数返回数据描述
start动画开始执行触发
end动画结束执行触发
click事件参数e动画点击执行触发

🌽 slot插槽

默认default

🥗 ref方法

方法名参数返回值描述
init初始化
play播放
stop停止
reset重置

💏 文档贡献

此页文档由ygy贡献(git,github),如果对该框架感兴趣的可以参与我们一同进步!