更新记录
1.3.0(2020-09-01) 下载此版本
- 组件基于css动画重写
- 不再基于uni.createAnimation()方法
1.2.2(2020-08-18) 下载此版本
工程传错了
1.2.1(2020-08-18) 下载此版本
修复了在H5端因为屏幕尺寸问题造成的弹出框位置错乱的bug
查看更多平台兼容性
一、使用说明
-
解压下载的压缩包,将组件放在项目的components目录下
-
引用组件
<wyb-transition :typeList="typeList" :isContentShow="show"> <!-- 这里放要显示/隐藏的内容 --> </wyb-transition>
import wybTransition from '@/components/wyb-transition/wyb-transition.vue' export default { components: { wybTransition }, data() { typeList: ['fade', 'slide-up'], show: false } }
-
Demo体验地址:点我访问(请用手机访问,或用桌面浏览器启动手机调试模式)
-
如果觉得我的插件还不错,可以下载我的插件的示例集合Demo => 传送门,里面有我全部的插件以及全部插件的示例工程
二、动画类型
-
透明度
fade => 渐隐渐现
-
缩放
zoom-largen => 缩放,小到大
zoom-lessen => 缩放,大到小
bounce => 缩放,弹簧
-
旋转
rotate-cw => 顺时针旋转
rotate-aw => 逆时针旋转
-
垂直位移
slide-up => 向上滑出
slide-down => 向下滑出
-
水平位移
slide-left => 向左滑出
slide-right => 向右滑出
-
组合方式
(1) 以上五类动画,每类可选一种动画进行组合
(2) 由于bounce是使用animation属性的动画,所以无法与除fade外的其他类型组合
(3) 旋转动画在与位移动画组合时,位移的方向是相反的
-
以上四类动画,每类可选一种动画进行组合
三、参数说明
-
Props
参数名 类型 默认值 用途 可选值 isContentShow Boolean false 显示/隐藏组件 true typeList Array ['fade'] 选择动画类型 见上方动画类型 duration Number 400 动画演出时长,单位ms 正整数 mode String ease 动画演出模式 linear:动画从头到尾的速度是相同的
ease:动画以低速开始,然后加快,在结束前变慢
ease-in:动画以低速开始
ease-in-out:动画以低速开始和结束
ease-out:动画以低速结束
step-start:动画第一帧就跳至结束状态直到结束
step-end:动画一直保持开始状态,最后一帧跳到结束状态origin String '50% 50%' 动画演出中心,第一个是控制水平方向的,第二个是控制垂直方向的(注意两个百分数中间有个空格) 百分数 multi Number 1 所有slide-*动画的平移倍数(对于自身宽高的倍数,默认一倍,即平移本身宽高的距离) 实数 zoomLessenMulti Number 1.5 当type包含zoom-lessen(从大到小缩放)时的基础放大倍数 正数 delay Number 0 动画演出延迟,单位ms 正整数 bounceMiddle Number 1.5 当type包含bounce时的中间放大倍数 正数 -
Event
事件名 用途 @onComeIn 入场动画开始时触发 @onGetOut 退场动画开始时触发 @finishComeIn 入场动画结束后触发 @finishGetOut 退场动画结束后触发