javascript - Vue js改变和动画元素的位置

Question

我有一个需要创建随机点的组件。

<div>
 <span v-for="point in getPoints()" 
     class="dot" :style="calcPosition()"></span>
</div>

methods: {
  getPoints() {
    return _.range(0, 100);
  },
  calcPosition() {
    return {
      top : (_.random(0, 230)) + 'px',
      left: (_.random(0, 210)) + 'px'
    }
  }
},

我如何创建一个时间间隔来每隔一秒运行一次 calcPosition 方法并为变化设置动画？

Answer 1

用 setInterval() 包装方法并为元素设置 CSS transition 属性。

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

您最初可以从 mounted() 生命周期状态调用您的方法。