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()生命周期状态调用你的方法。