vue transition无效

模仿iview drawer过程中，使用vue的transition组件，发现当transition的样式写在，transition .dashboard样式上面时，transition动画无效

    <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;
  }