动画

介绍

使元素从一种样式逐渐变化为另一种样式的效果。

基础用法

通过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>

API

Props

参数 说明 类型 可选值 默认值
name 动画类型 string fade
show 是否展示组件 boolean true
duration 动画时长,单位为毫秒 number|object 300
custom-style 自定义样式 object -

Events

事件名 回调参数 说明
click event object - event 点击事件
before-enter - 进入前触发
enter - 进入中触发
before-leave - 离开前触发
leave
touchmove - 触摸滑动时触发

Slots

名称 说明 Bindings
default 默认插槽