vue2实现试点动画

可以使用 Vue2 中的 `<transition>` 组件来实现简单的动画效果。以下是一个示例：

<template>
  <div>
    <button @click="toggle">切换</button>
    <transition name="fade">
      <p v-if="visible">这是一个试点动画</p>
    </transition>
 </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    toggle() {
      this.visible = !this.visible;
    }
  }
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

在上述示例中，我们使用了 `<transition>` 组件包裹了一个 `<p>` 标签。当 `visible` 的值为 true 时，`<p>` 标签会以淡入的动画效果显示出来；当 `visible` 的值为 false 时，`<p>` 标签会以淡出的动画效果消失。

你可以根据需要调整动画效果的样式，比如修改 `transition` 的过渡时间或者添加其他 CSS 属性来实现更多的动画效果。