Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/callmesoul/wepy-nices
微信小程序wepy框架点赞动画插件
https://github.com/callmesoul/wepy-nices
Last synced: 2 months ago
JSON representation
微信小程序wepy框架点赞动画插件
- Host: GitHub
- URL: https://github.com/callmesoul/wepy-nices
- Owner: callmesoul
- License: mit
- Created: 2018-03-23T07:02:43.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-25T03:12:07.000Z (over 6 years ago)
- Last Synced: 2024-11-07T09:53:44.164Z (3 months ago)
- Language: CSS
- Size: 31.3 KB
- Stars: 39
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-wepy - wepy-nices: 点赞动画插件
README
# 微信小程序 wepyjs 第三方 点赞动画插件
### 效果：
## 使用
### 安装组件
```
npm install wepy-nices --save
```
### 引入组件
```javascript
import wepy from 'wepy';
import nices from 'wepy-nices';
export default class Index extends wepy.page {
data={
active:false, //必填 状态 true 已点赞 false为点赞
params:{ //选填 动画效果配置
animate:'bounceIn', //选填 点赞图标动画
activeColor:'yellow', //选填 已点赞图标颜色
color:'#000', //选填 未点赞图标颜色
enableCancel:false //选填 是否可取消点赞
}
}
components = {
nices
};
onLoad(){
}
}
```
> 注意
> 1.可用标签包住组件，触发自己的事件，改变active的值从而出发动画效果。
> 2.也可不用标签包住，组件自带切换事件，但紧切换，不返回或触发时间。
> 主要是因为考虑需要用多个时 repeat 更方便操作。所以使用1即可满足大部分需求。
---------------------------------------
###animate
动画效果引用了[animate.min.scss](https://daneden.github.io/animate.css/)
| animate | | | |
| ----------------- | ------------------ | ------------------- | -------------------- |
| `bounce` | `flash` | `pulse` | `rubberBand` |
| `shake` | `headShake` | `swing` | `tada` |
| `wobble` | `jello` | `bounceIn` | `bounceInDown` |
| `bounceInLeft` | `bounceInRight` | `bounceInUp` | `bounceOut` |
| `bounceOutDown` | `bounceOutLeft` | `bounceOutRight` | `bounceOutUp` |
| `fadeIn` | `fadeInDown` | `fadeInDownBig` | `fadeInLeft` |
| `fadeInLeftBig` | `fadeInRight` | `fadeInRightBig` | `fadeInUp` |
| `fadeInUpBig` | `fadeOut` | `fadeOutDown` | `fadeOutDownBig` |
| `fadeOutLeft` | `fadeOutLeftBig` | `fadeOutRight` | `fadeOutRightBig` |
| `fadeOutUp` | `fadeOutUpBig` | `flipInX` | `flipInY` |
| `flipOutX` | `flipOutY` | `lightSpeedIn` | `lightSpeedOut` |
| `rotateIn` | `rotateInDownLeft` | `rotateInDownRight` | `rotateInUpLeft` |
| `rotateInUpRight` | `rotateOut` | `rotateOutDownLeft` | `rotateOutDownRight` |
| `rotateOutUpLeft` | `rotateOutUpRight` | `hinge` | `jackInTheBox` |
| `rollIn` | `rollOut` | `zoomIn` | `zoomInDown` |
| `zoomInLeft` | `zoomInRight` | `zoomInUp` | `zoomOut` |
| `zoomOutDown` | `zoomOutLeft` | `zoomOutRight` | `zoomOutUp` |
| `slideInDown` | `slideInLeft` | `slideInRight` | `slideInUp` |
| `slideOutDown` | `slideOutLeft` | `slideOutRight` | `slideOutUp` |
### 更新日志
| 日期 | 版本 | 说明 |
| ----------------- | ------------------ | -------------------|
| 20180323 | 0.0.1 | init | `
[本人博客：callmesoul.cn](http://callmesoul.cn)
