用 Vue 复制 jQuery' slideDown()

Question

我正在尝试应用 this example 使我的内容在单击按钮时显示，并带有类似于 jQuery' slideUp/slideDown.[=18= 的垂直滑动动画]

我的内容在我这样称呼的 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>

我找不到这和上面提到的笔有什么区别。它在笔中运行良好，但就我而言，动画仅在隐藏我的内容时有效。当我的内容显示时动画不起作用，它立即显示。

为什么？

Answer 1

这不适用于 v-if，因为内容在页面加载时不存在，Vue 需要时间来调用它，这会阻止 CSS 动画正常工作。

相反，必须使用 v-show 以便内容已经存在于 DOM。

用 Vue 复制 jQuery' slideDown()

Replicating jQuery' slideDown() with Vue

jquery

animation

transition

vue.js