使用Vue复制jQuery'slideDown()

我想申请 this example

我的内容在一些 Portfolio 因此我称之为组件:

<portfolio v-if="portfolioOpen" />

单击按钮切换变量 portfolioOpen false 到 true ,那么在我的投资组合组件中,我有:

<style lang="scss">
  .portfolio-enter-active,
  .portfolio-leave-active {
     transition: all 100ms ease-in 0s
  }

  .portfolio-enter-to,
  .portfolio-leave {
     max-height: 1000px;
     overflow: hidden;
  }

  .portfolio-enter,
  .portfolio-leave-to {
     overflow: hidden;
     max-height: 0;
  }
</style>

为什么?