使元素从一种样式逐渐变化为另一种样式的效果。
通过show
属性控制动画的显示与隐藏。
<z-transition :show="show" :name="name">
</z-transition>
data() {
return {
show: false,
name: 'fade',
showCustom: false
}
},
通过name
属性可切换动画类型。
<z-transition :show="show" :name="fade">
</z-transition>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
name | 动画类型 | string | fade |
|
show | 是否展示组件 | boolean | true |
|
duration | 动画时长,单位为毫秒 | number|object | 300 |
|
custom-style | 自定义样式 | object | - |
事件名 | 回调参数 | 说明 |
---|---|---|
click | event object - event |
点击事件 |
before-enter | - | 进入前触发 |
enter | - | 进入中触发 |
before-leave | - | 离开前触发 |
leave | ||
touchmove | - | 触摸滑动时触发 |
名称 | 说明 | Bindings |
---|---|---|
default | 默认插槽 |