0.0.8 • Published 5 years ago
vi-motion v0.0.8
vi-motion
vi-motion组件的内部运动是css3动画，使用的是animate开源动画库 非常用到的提示：vi-motion 组件的内部运动是css3的transform 所以在自定义 content盒子的样式时候，请不要使用transform，即使用了也不会生效
使用
npm i vi-motion
使用微信开发者工具构建NPM并使用NPM模块
在页面的json文件中引入
{
"usingComponents": {
"vi-motion": "vi-motion"
}
}Config Props
| Props | Data Type | description | 选项 | default Value | 版本号 |
|---|---|---|---|---|---|
| ishide | Boolean | 控制组件的显示隐藏 | 必填 | false | 0.0.1 |
| enterAnimateName | String | 出现时候的运动方式(原接口名animateName已被废弃) | 选填 | bounce | 0.0.3 |
| outAnimateName | String | 消失时候的运动方式 | 选填 | '' | 0.0.3 |
| clickMaskHide | Boolean | 点击mask遮罩层时，组件是否消失(原接口名isMaskHide已被废弃) | 选填 | false | 0.0.3 |
| outHasAnimate | Boolean | 组件消失的时候是否出现动画 | 选填 | true | 0.0.4 |
| animationDuration | Number | 运动的时长(单位秒s) | 选填 | 1 | 0.0.3 |
| maskIsHide | Boolean | 是否隐藏mask遮罩层 | 选填 | false | 0.0.4 |
| maskColor | String | 更改mask遮罩层颜色 | 选填 | rgba(0,0,0, .3) | 0.0.4 |
Event name
| name | description | returns | 版本号 |
|---|---|---|---|
| hide | 点击遮罩层是否隐藏 | 组件库的显示或隐藏状态(ishide) | 0.0.1 |
External classes (组件样式扩展功能)
| name | description | 版本号 |
|---|---|---|
| container-class | 运动组件装载内容的盒子样式表名称 | 0.0.1 |
enter animate name
| name | name | name |
|---|---|---|
| bounce | flash | pulse |
| rubberBand | shake | headShake |
| swing | tada | wobble |
| jello | bounceIn | bounceInDown |
| bounceInLeft | bounceInRight | bounceInUp |
| fadeIn | fadeInDown | fadeInDownBig |
| fadeInLeft | fadeInLeftBig | fadeInRight |
| fadeInRightBig | fadeInUp | fadeInUpBig |
| flipInX | flipInY | lightSpeedIn |
| rotateInDownLeft | rotateInDownRight | rotateInUpLeft |
| rotateInUpRight | jackInTheBox | rollIn |
| zoomIn | zoomInDown | zoomInLeft |
| zoomInRight | zoomInUp | slideInDown |
| slideInLeft | slideInRight | slideInUp |
out animate name
| name | name | name |
|---|---|---|
| hinge | bounceOut | bounceOutDown |
| bounceOutLeft | bounceOutRight | bounceOutUp |
| fadeOut | fadeOutDown | fadeOutDownBig |
| fadeOutLeft | fadeOutLeftBig | fadeOutRight |
| fadeOutRightBig | fadeOutUp | fadeOutUpBig |
| flipOutX | flipOutY | lightSpeedOut |
| rotateOut | rotateOutDownLeft | rotateOutDownRight |
| rotateOutUpLeft | rotateOutUpRight | rollOut |
| zoomOut | zoomOutDown | zoomOutLeft |
| zoomOutRight | zoomOutUp | slideOutDown |
| slideOutLeft | slideOutRight | slideOutUp |
版本信息
- v0.0.1 初始版本
- v0.0.2 修改组件名称
- v0.0.3 新增组件隐藏时可配置动画效果, 点击mask遮罩层可配置是否隐藏组件
- v0.0.4 新增mask遮罩层颜色修改、隐藏mask遮罩层
- v0.0.5 修改说明文档
- v0.0.8 修改扩展样式的接口名、修复bug