要素の位置を変更してアニメーションする

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' 
    } 
    } 
}, 

どのようにして1秒ごとにcalcPositionメソッドを実行し、変更をアニメーション化する間隔を作成できますか？

Answer 1

setInterval()でメソッドをラップし、要素のCSS遷移プロパティを設定します。

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

あなたは、最初にmounted()ライフサイクル状態から、あなたのメソッドを呼び出すことができます。