inválida transición vue

Imitar proceso de cajón iview, el uso de componentes vue de transición, encontró que cuando el estilo de transición de la escritura, cuando el estilo de transición por encima .dashboard, inválida animación de transición

    <transition name="drawer">
      <div class="dashboard" v-show="dashboardShow"></div
    ></transition>

//   写在上面无效
//   .drawer-enter-active,
//   .drawer-leave-active {
//     transition: all 1s ease-out;
//   }
//   .drawer-enter, .drawer-leave-to /* .fade-leave-active below version 2.1.8 */ {
//     width: 0;
//   }
 .dashboard {
    width: 180px;
    height: 100%;
    background: chocolate;
    // transition: all 2s ease-out;
  }
  // 要写在 里面内容的下面
  .drawer-enter-active,
  .drawer-leave-active {
    transition: all 1s ease-out;
  }
  .drawer-enter, .drawer-leave-to /* .fade-leave-active below version 2.1.8 */ {
    width: 0;
  }