vue中元素添加从上到下缓动动画，高度从0到自适应

要实现从上到下缓动动画，高度从0到自适应的效果，可以使用Vue的过渡动画和CSS的transition属性。

首先，在需要添加动画的元素上添加一个transition属性，指定动画过渡的属性和持续时间：

.transition {
  transition: height 0.5s ease-in-out;
}

然后，在Vue的模板中，使用过渡组件包裹需要添加动画的元素，并设置动态的过渡状态：

<transition name="fade">
  <div :class="{ transition: show }" v-show="show">
    <!-- 内容 -->
  </div>
</transition>

在data中定义show属性，控制元素的显示和隐藏，同时在mounted钩子函数中，使用ref获取元素的实际高度，并将其赋值给元素的高度，实现从0到自适应的过渡效果：

export default {
  data() {
    return {
      show: false
    }
  },
  mounted() {
    this.show = true;
    this.$nextTick(() => {
      const height = this.$refs.content.clientHeight;
      this.$refs.content.style.height = `${height}px`;
    })
  }
}