Vue中如何重复移动一个元素？答案

【问题标题】：How do to repeatedly move an elemtent in Vue?Vue中如何重复移动一个元素？
【发布时间】：2021-05-09 08:00:08
【问题描述】：

使用 jQuery 反复向右移动一个元素很容易，每次我想这样做我都可以这样调用：

$('#element').css({left: '+=100'});

或者

$('#element').animate({
   left: '+=100'
}, 500);

我将如何在 Vue 中做类似的事情，最好将值作为变量并进行动画处理？

【问题讨论】：

我的回答有帮助吗？

标签： jquery css vue.js

【解决方案1】：

这是一个关于如何实现翻译和过渡的工作解决方案：https://codesandbox.io/s/move-element-and-animation-7v2do?file=/src/App.vue

过渡完全在 CSS 中完成

transition: transform 500ms ease;

move 的逻辑非常简单。使用 getBoundingClientRect() 可能会使某些东西更加动态，但这个示例可以在很多方面进行改进，具体取决于您的目标。

data() {
  return {
    horizontalOffset: 0,
    verticalOffset: 0,
  }
},
methods: {
  move(x = 0, y = 0) { // defaults to 0 if no arguments passed to `move`
    this.horizontalOffset += x * 10
    this.verticalOffset += y * 10
    // we do select the element with `$refs`, then translate it accordingly to our `data`
    this.$refs.element.style.transform = `translate(${this.horizontalOffset}px, ${this.verticalOffset}px)`
  },
  reset() {
    this.horizontalOffset = 0
    this.verticalOffset = 0
    this.move()
  },
},

最后，我们确实需要一些基本的标记，我们可以给它一些变量作为参数

<button @click="move(-10, 0)">move to left</button>

【讨论】：