vue 自动定位到且震动

可以使用 HTML5 的 Geolocation API 来获取用户的位置信息，然后使用 Vue 的 `$refs` 来获取需要定位到的元素，最后使用 CSS3 的 `animation` 属性来实现震动效果。

下面是一个简单的实现示例：

<template>
  <div>
    <button @click="getLocation">获取位置</button>
    <div ref="target" class="target" :class="{ shake: shaking }">定位到这里</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shaking: false
    }
  },
  methods: {
    getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          position => {
            const target = this.$refs.target
            target.style.transform = `translate(${position.coords.latitude}px, ${position.coords.longitude}px)`
            this.shaking = true
            target.addEventListener('animationend', () => {
              this.shaking = false
            })
          },
          error => {
            console.error(error)
          }
        )
      } else {
        console.error('浏览器不支持 Geolocation API')
      }
    }
  }
}
</script>

<style>
.target {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

.shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(-5deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(5deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}
</style>

在上面的代码中，通过点击“获取位置”按钮来触发 `getLocation` 方法，该方法会调用 Geolocation API 来获取用户的位置信息。如果获取成功，就将位置信息应用到 `target` 元素的 `transform` 属性上，同时添加 `shake` 类来触发震动动画，动画结束后再移除 `shake` 类。最后使用 CSS3 的 `@keyframes` 定义震动动画。