Transition 动画

该组件用于组件的动画过渡效果。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
show	Boolean	false	控制组件显示或隐藏	All
mode	Array,String	fade	过渡动画类型 fade渐隐渐出过渡 slide-top由上至下过渡 slide-right由右至左过渡 slide-bottom由下至上过渡 slide-left由左至右过渡 zoom-in由小到大过渡 zoom-out由大到小过渡	All
duration	Number,String	300	过渡动画持续时间	All
timingFunction	String	ease	使用的动画过渡函数	All
onceRender	Boolean	false	只渲染一次	All
initAnimation	Boolean	true	初始化执行动画	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

事件

事件名	说明
click	isShow
change	isShow
ready	动画准备完毕

注意

只有ready事件触发后，才能正确的执行动画。

插槽

插槽名	说明
default	默认插槽

示例

<template>
    <c-transition :show="show" :mode="['fade','zoom-in']" @ready="onTransitionReady">
        <c-box bgColor="c-bg-primary" width="100" height="100"></c-box>
    </c-transition>
    <c-btn text="切换动画" @click="show = !show" />"
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const show = ref(false);
onTransitionReady(()=>{
    show.value = true;
})
</script>