magix-components
Version:
84 lines (67 loc) • 2.23 kB
Markdown
> 该组件提供css无法完成的动画效果
<a href="https://magix-components.github.io/magix-components/#!/mx-effect/index" target="_blank">在线示例</a>
```html
<input value="20" class="input" mx-view="mx-effect/count" view-to="<%@toNumber%>">
<div mx-view="mx-effect/count" view-to="<%@toNumber%>" view-duration="2000" view-fixed="2" style="font-size: 30px;line-height: 50px;letter-spacing: 2px;">20.00</div>
<button class="btn btn-brand ml5" type="button" mx-click="changeNumber({i:true})">increase number</button>
<button class="btn btn-brand ml5" type="button" mx-click="changeNumber()">decrease number</button>
```
```js
let Magix = require('magix');
module.exports = Magix.View.extend({
tmpl: '@index.html',
render() {
let me = this;
me.updater.digest({
toNumber: 20
});
},
'changeNumber<click>'(e) {
let me = this;
let to = me.updater.get('toNumber');
let diff = 300;
if (!e.params.i) {
diff = -diff;
}
me.updater.digest({
toNumber: to + diff
});
}
});
```
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------- | -------- | -------- |
| to | 改变到的值 | number | |
| duration | 持续时间，毫秒 | number | 500 |
| fixed | 小数位 | number | 0 |
---
<a href="https://magix-components.github.io/magix-components/#!/mx-effect/index" target="_blank">在线示例</a>
```html
<mx-effect-dance value="<%=content%>" duration="<%=duration%>" dance="<%=dance%>" />
```
```js
let Magix = require('magix');
module.exports = Magix.View.extend({
tmpl: '@index.html',
render() {
let me = this;
me.updater.digest({
content: '你从远处聆听我，我的声音却无法触及你。',
dance: 'd1',
duration: '60'
});
}
});
```
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------- | -------- | -------- |
| value | 显示的内容 | string | |
| duration | 单字效果间隔时间，毫秒 | number | 60 |
| dance | 效果，目前只能从d1-d11之间选取 | string | d1 |