1.0.0 • Published 2 years ago
安装
npm i @deji/dj-transition
使用
方式 1
<template>
<dj-transition :show="visible"></dj-transition>
</template>
<script>
import djTransition from '@deji/dj-transition'
export default {
data() {
return {
visible: true,
}
},
components:{
djTransition
},
}
</script>
方式2 (easyCom)
//pages.json
{
"easycom": {
"^dj-(.*)": "@deji/dj-$1/index.vue"
},
}
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
show | 是否可见 | Boolean | true / false | false |
mode | 动画模式 | String | 详见mode说明 | fade |
duration | 动画执行时间 (毫秒) | Number, String | - | 200 |
customStyle | 自定义样式 | Object | - | - |
mode
参数 | 说明 |
---|
fade | 淡入淡出 |
zoom | 缩放 |
fade-zoom | 缩放淡入 |
fade-up | 上滑淡入 |
fade-down | 下滑淡入 |
fade-left | 左滑淡入 |
fade-right | 右滑淡入 |
slide-up | 上滑进入 |
slide-down | 下滑进入 |
slide-left | 左滑进入 |
slide-right | 右滑进入 |
Events
事件名 | 说明 | 参数 |
---|
click | 点击时会触发该事件 | - |
beforeEnter | 动画进入之前 | - |
afterEnter | 动画进入之后 | - |
beforeLeave | 动画离开前 | - |
afterLeave | 动画离开后 | - |
Slot