更新记录

1.3.0（2020-09-01）

1. 组件基于css动画重写
2. 不再基于uni.createAnimation()方法

1.2.2（2020-08-18）

工程传错了

1.2.1（2020-08-18）

修复了在H5端因为屏幕尺寸问题造成的弹出框位置错乱的bug

平台兼容性

一、使用说明

1. 解压下载的压缩包，将组件放在项目的components目录下

2. 引用组件

   <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
       }
   }

3. Demo体验地址：点我访问（请用手机访问，或用桌面浏览器启动手机调试模式）

4. 如果觉得我的插件还不错，可以下载我的插件的示例集合Demo => 传送门，里面有我全部的插件以及全部插件的示例工程

二、动画类型

1. 透明度

   fade => 渐隐渐现

2. 缩放

   zoom-largen => 缩放，小到大

   zoom-lessen => 缩放，大到小

   bounce => 缩放，弹簧

3. 旋转

   rotate-cw => 顺时针旋转

   rotate-aw => 逆时针旋转

4. 垂直位移

   slide-up => 向上滑出

   slide-down => 向下滑出

5. 水平位移

   slide-left => 向左滑出

   slide-right => 向右滑出

6. 组合方式

   (1) 以上五类动画，每类可选一种动画进行组合

   (2) 由于bounce是使用animation属性的动画，所以无法与除fade外的其他类型组合

   (3) 旋转动画在与位移动画组合时，位移的方向是相反的

7. 以上四类动画，每类可选一种动画进行组合

三、参数说明

1. 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时的中间放大倍数	正数

2. Event

   事件名	用途
   @onComeIn	入场动画开始时触发
   @onGetOut	退场动画开始时触发
   @finishComeIn	入场动画结束后触发
   @finishGetOut	退场动画结束后触发