vue动画 从中间向上下两边均匀过渡动画效果

你可以使用Vue的transition组件和CSS3的transform属性来实现从中间向上下两边均匀过渡的动画效果。具体实现步骤如下：

1. 在Vue模板中，使用transition组件包裹需要添加动画效果的元素。

2. 在CSS样式中，使用transform属性来实现位移动画效果。具体可以使用translateY()函数来实现垂直方向上的位移。

3. 在transition组件中，通过设置enter-active-class和leave-active-class属性来指定动画的CSS类名。这些类名可以在CSS样式中定义动画效果。

下面是一个示例代码：

<template>
  <transition name="fade">
    <div v-show="show">
      <!-- 这里是需要添加动画效果的元素 -->
    </div>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: transform 0.5s;
}

.fade-enter, .fade-leave-to {
  transform: translateY(50%);
}
</style>

在上面的代码中，我们使用了名为"fade"的transition组件，并设置了两个CSS类名：fade-enter-active和fade-leave-active。这两个类名都包含了transform属性和transition属性，用于实现动画效果。

同时，在CSS样式中，我们还定义了两个CSS类名：fade-enter和fade-leave-to。这两个类名分别对应了动画的起始状态和结束状态。在这里，我们使用了translateY()函数将元素在垂直方向上向下平移了50%的距离。

注意，这里的50%距离应该根据你的具体需求进行调整，以实现你想要的动画效果。