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