gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 21:21:29 26 4
gpt4 key购买 nike

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

<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 方法并为变化设置动画?

最佳答案

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

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

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

关于javascript - Vue js改变和动画元素的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45141584/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com