遇到一个vue内建组件transition 没有把相应的动画类添加到根节点上的问题，经折腾发现组件transition生效有两个必要条件：

1. 组件transition动画期间的添加的类只会对它下面的第一个根子节点生效。
2. 第一个根子节点必须设置css的transition。

场景：想通过在父节点应用transition，所以在动画期间父节点会应用这些动画类，通过这些类来控制子节点的动画。所以只在子节点设置了css的transition属性，因为父节点没有动画就没设置transition，导致应用动画类失败。

举个例子，此时父元素没有设置css的transition，那么slide-enter-active等动画类就不会应用到parent上，除非给父元素添加transition，尽管它什么属性也没有改变。

<template>
  <transition name="slide">
    <div class="parent" v-show="show">
      <div class="child"></div>
    </div>
  </transition>
</template>

<style lang="less">
  .parent {
    width: 300px;
    height: 300px;
    /*transition: all .3s ease-in-out;*/
  }
  .child {
    height: 100px;
    background-color: red;
    transition: all .3s ease-in-out;
  }
  
  .slide-enter-active,
  .slide-leave-active {
    .child {
      transform: translateY(-100%);
    }
  }
</style>