vue2个div切换显示1个矮1个高切换时添加展开特效

可以使用Vue的transition组件来实现切换时的展开特效。

首先，定义两个div，一个矮的，一个高的，并用v-show指令控制它们的显示和隐藏。

<template>
  <div>
    <div v-show="showLow" class="low"></div>
    <div v-show="!showLow" class="high"></div>
  </div>
</template>

然后，在transition组件中包裹这两个div，并给它们添加一个类名，用于定义展开动画。

<template>
  <div>
    <transition name="expand">
      <div v-show="showLow" class="low"></div>
    </transition>
    <transition name="expand">
      <div v-show="!showLow" class="high"></div>
    </transition>
  </div>
</template>

最后，在样式中定义.expand-enter和.expand-leave-to类名来实现展开特效。

<style>
  .expand-enter-active, .expand-leave-active {
    transition: height 0.5s;
  }
  .expand-enter, .expand-leave-to {
    height: 0;
    opacity: 0;
  }
  .low {
    height: 100px;
    background-color: green;
  }
  .high {
    height: 200px;
    background-color: blue;
  }
</style>

这样，当showLow变量改变时，Vue会自动添加expand-enter和expand-leave-to类名来实现展开特效