vue组件transition没有把动画类应用到dom问题

遇到一个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>

其实这个问题做复杂了，既然父元素没有动画，那么在此使用transition组件不是一个合适的场合，transition组件应该仅仅用在它的子节点有动画的情景，在这里我们可以通过:class简单的在parent上添加或移除类来达到相同的效果。

在此做一个记录吧。