Vue指令实现数字增长动画?
vue中,想要实现几个数字从0缓慢增长到目标值的动态特效,我采用了vue指令实现。Vue.directive('countRunning', {bind(el, binding, vnode, oldVnode) {var timer = null;const targetDomCount = el.getAttribute('data-targ...
·
vue中,想要实现几个数字从0缓慢增长到目标值的动态特效,我采用了vue指令实现。
Vue.directive('countRunning', {
bind(el) {
let timer = null;
const targetDomCount = el.getAttribute('data-target'); //data-target为目标值
// 数字动画总是分25次走完 (可自行更改)
let step=targetDomCount/25;
let nowCount = el.innerHTML; //当前页面显示值
timer = setInterval(() => {
if (nowCount < targetDomCount) {
nowCount = nowCount + step;
} else {
clearInterval(timer);
timer = null;
}
// 避免显示小数
el.innerHTML = parseInt(nowCount);
}, 200);
}
})
<p class="countRunning" v-countRunning :data-target='item.count'>0</p>
更多推荐
已为社区贡献4条内容
所有评论(0)