vue2 多层嵌套使用过渡动画

<transition name="fade">
  <div class="error" v-if="showError">
    <div class="errLine"></div>
    <i></i>
    <span>{{errorMsg}}</span>
  </div>
</transition>

.error{
  width: calc(100% - 2.2rem);
  color: $red;
  font-size: $defaultSize;
  padding-top: 0.12rem;
  float: right;
  margin: 0 0 0.48rem;
  position: relative;
}
.error i{
  float: left;
  width: 0.3rem;
  height: 0.3rem;
  background: url(../assets/images/icon05.png) no-repeat;
  background-size: 100% 100%;
  margin: 0.06rem 0.1rem 0 0;
}
.errLine {
  position: absolute;
  width: 5rem;
  height: 1px;
  background: $red;
  top: 0;
  left: 0;
  transition: all 0.4s linear
}

.fade-enter .errLine {
  width: 0;
}