Vue指令实现数字增长动画?

vue中,想要实现几个数字从0缓慢增长到目标值的动态特效,我采用了vue指令实现。

Vue.directive('countRunning', {
    bind(el, binding, vnode, oldVnode) {
        var timer = null;
        const targetDomCount = el.getAttribute('data-target'); //data-target为目标值
        let nowCount = parseInt(el.innerHTML); //当前页面显示值
        timer = setInterval(() => {
            if (nowCount < targetDomCount) {
                nowCount++;
            } else {
                clearInterval(timer);
                timer = null;
            }
            el.innerHTML = nowCount;
        }, 80);
    }
})
  <p class="countRunning" v-countRunning :data-target='item.count'>0</p>

 

发布了24 篇原创文章 · 获赞 3 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/sunny123x/article/details/102589067