vue2 v-if动画

Vue.js 2 中可以使用 `v-if` 指令来实现条件渲染，并且通过配合 CSS 动画可以实现元素的动画效果。下面是一个简单的示例：

首先，你需要在 Vue 实例中导入动画相关的 CSS 文件。你可以使用 Vue 提供的 `transition` 组件来为元素添加动画效果。在你的 HTML 文件中，可以像这样导入：

<link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css">

然后，在 Vue 模板中，你可以使用 `transition` 组件来包裹需要添加动画的元素。例如：

<transition name="fade">
  <div v-if="show">
    <!-- 这里是需要条件渲染和添加动画的元素 -->
  </div>
</transition>

在上面的示例中，我们使用了 `fade` 作为动画名称，你可以根据需要自定义名称。然后，根据 `v-if` 的条件，当 `show` 为 `true` 时，这个被包裹的元素会被渲染出来，并且附带动画效果。

最后，你需要在 CSS 文件中定义动画的样式。以 `fade` 动画为例，你可以这样定义：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

在上面的样式中，我们使用了 `opacity` 属性来实现淡入淡出的效果，并通过 `transition` 属性来设置动画的过渡时间。

这样，当 `show` 的值改变时，元素就会根据条件进行渲染，并且带有动画效果。