VueJS宽度和高度过渡

Question

所以，我几天来一直在修补如何使用VueJS过渡来处理高度和宽度过渡。

我可以像在笔中那样工作： https://codepen.io/Irhamkim/pen/XaWdVM

HTML

<div id="app">
  <nav class="nav">
    <transition name="fade">
      <button class="nav__button nav__button--menu" v-if="!dropdownIsActive" @click="dropdownIsActive = !dropdownIsActive"></button>
    </transition>
    <transition name="fade">
      <button class="nav__button nav__button--close" v-if="dropdownIsActive" @click="dropdownIsActive = !dropdownIsActive"></button>
      </transition>
    <transition name="slide">
      <div v-if="dropdownIsActive" class="nav__dropdown">
        <div v-for="item in menu" class="nav__dropdown-menu">
          <div class="nav__dropdown-link">{{ item }}</div>
          </div>
      </div>
    </transition>
  </nav>
</div>

CSS

@mixin font($color, $size, $weight) {
  color: $color;
  font-family: Roboto, Helvetica;
  font-size: $size;
  font-weight: $weight;
}
@mixin center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nav {
  background-color: rgb(15, 15, 15);
  border-bottom: 3px solid rgb(243, 0, 0);
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  &__menu-wrapper {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45%;
    height: 70px;
    @media (max-width: 425px) {
      display: none;
    }
  }
  &__logo {
    @include font(white, 17px, 700);
    position: relative;
    min-width: 30%;
  }
  &__menu {
    flex: 1 1 auto;
    position: relative;
    &:hover, &:active {
      background-color: rgb(243, 0, 0);
    }
  }
  &__link {
    @include font(white, 17px, 700);
    @include center();
  }
  &__button {
    background-color: rgb(15, 15, 15);
    border: none;
    display: none;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(0, -50%);
    width: 60px;
    height: 60px;
    @media (max-width: 425px) {
      display: block;
    }
    &:focus {
      outline-style: none;
    }
    &--menu {
      &::before {
        content: 'Menu';
        @include font(white, 17px, 700);
        @include center();
      }
    }
    &--close {
      &::before {
        content: 'Close';
        @include font(white, 17px, 700);
        @include center();
      }
    }
  }

  &__dropdown {
    background-color: rgb(15, 15, 15);
    border-bottom: 3px solid rgb(243, 0, 0);
    box-sizing: border-box;
    position: absolute;
    bottom: 2px;
    transform: translate(0%, 100%);
    width: 100%;
    height: 135px;
  }
  &__dropdown-menu {
    color: white;
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 45px;
    text-decoration: none;
    &:active, &:hover {
      background-color: rgb(243, 0, 0);
    }
  }
  &__dropdown-link {
    @include font(white, 17px, 700);
    @include center();
  }
}

.slide-enter-active, .slide-leave-active {
  transition: width 0.3s, height 0.3s;
  transition-timing-function: ease-in-out;
}

.slide-enter, .slide-leave-to{
  width: 0;
  height: 0;
}

.slide-enter-to, .slide-leave {
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
  transition-timing-function: ease-in-out;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.fade-enter-to, fade-leave {
  opacity: 1;
}

JS

var app = new Vue({
  el: '#app',
  data() {
    return {
      dropdownIsActive: false,
      menu: ['Home', 'Contact', 'About']
    }
  },
  methods: {
  }
});

但是，当我尝试像这样进行宽度/高度转换时，它失败了： https://codepen.io/Irhamkim/pen/JyRmqw

HTML

<div id="app">
  <button @click="toggle">Toggle</button>
  <transition name="slide">
    <div>
  <div v-if="isActive" class="box"></div>
  </transition>
    </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.2s;
}

.slide-enter, .slide-leave-to {
  height: 0;
}

.slide-enter-to, .slide-leave {
}

.box {
  background-color: rgb(15, 15, 15);
  border-bottom: 3px solid rgb(243, 0, 0);
  box-sizing: border-box;
  position: absolute;
  top: 2px;
  transform: translate(0%, 100%);
  width: 100%;
  height: 135px;
}

JS

let app = new Vue({
  el: '#app',
  data() {
    return {
      isActive: false,
    }
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive
    }
  }
})

我是否遗漏了任何让第二支笔过渡不起作用的东西？