vue 点击按钮实现div移动动画

在Vue中实现点击按钮实现div移动动画可以通过使用Vue的过渡效果和动画库来实现。下面是一个简单的示例代码：

首先，在Vue组件中定义一个data属性来控制div的位置：

<template>
  <div>
    <button @click="moveDiv">移动</button>
    <div :style="divStyle"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      divStyle: {
        transform: 'translateX(0px)' // 初始位置
      }
    }
  },
  methods: {
    moveDiv() {
      this.divStyle.transform = 'translateX(200px)' // 移动到200px的位置
    }
  }
}
</script>

然后，为div添加过渡效果，可以使用Vue的`<transition>`组件包裹需要过渡的元素，并设置过渡效果的类名：

<template>
  <div>
    <button @click="moveDiv">移动</button>
    <transition name="slide">
      <div :style="divStyle"></div>
    </transition>
  </div>
</template>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s; // 过渡动画时间
}

.slide-enter,
.slide-leave-to {
  transform: translateX(0px); // 初始位置
}
</style>

最后，可以使用CSS动画库（如Animate.css）来为过渡效果添加更多的动画效果。首先在项目中引入Animate.css，然后为过渡效果的类名添加对应的动画类名即可：

<template>
  <div>
    <button @click="moveDiv">移动</button>
    <transition name="slide" enter-active-class="animated slideInRight" leave-active-class="animated slideOutLeft">
      <div :style="divStyle"></div>
    </transition>
  </div>
</template>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s; // 过渡动画时间
}

.slide-enter,
.slide-leave-to {
  transform: translateX(0px); // 初始位置
}
</style>

这样，点击按钮时，div会以动画的方式从初始位置移动到指定位置。