vue项目引入标签云动画js函数，不执行

最新推荐文章于 2025-05-19 13:52:20 发布

原创最新推荐文章于 2025-05-19 13:52:20 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue js 动画

vue 专栏收录该内容

18 篇文章

订阅专栏

本文探讨在Vue项目中引入3D标签云动画JS函数后，数据更新但动画不再执行的问题。深入分析可能的原因，并提供解决思路，包括使用$nextTick确保DOM更新后执行动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目引入标签云动画js函数，数据重新渲染了，但是动画不执行了

    rollTagCloud() {
      /* 3D标签云滚动函数*/
      const timer = setTimeout(() => {
        this.$nextTick(function(){
          // eslint-disable-next-line
          tagcloud({
            selector: '.tagcloud', // 元素选择器 fontsize: 16, //基本字体大小, 单位px
            radius: 70, // 滚动半径, 单位px
            mspeed: 'normal', // 滚动最大速度, 取值: slow, normal(默认), fast
            ispeed: 'normal', // 滚动初速度, 取值: slow, normal(默认), fast
            direction: 135, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
            keep: false // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
          })
        })
      }, 20)
      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
      this.$once('hook:beforeDestroy', () => {
        clearTimeout(timer)
      })
    }