Html Vuejs转换css仅向下滑动

我一直在寻找解决这个问题的办法，但似乎找不到解决这个问题的最佳办法。基本上，我有一个手风琴，当用户打开它时，它应该轻轻地向下滑动，并有一个很好的过渡

我敢肯定，这是可能的，只有css。如果我错了，请纠正我，但是css转换在性能方面比js转换更好

现在，我要解决的问题是HTML：

<transition name="slide-down">
  <ul v-if="isDisplayingOpeningHours" class="mt-2 text-sm flex flex-col space-y-2">
    <li v-for="i in 10" :key="i"> <!-- just for testing purposes -->
      element
    </li>
  </ul>
</transition>

这会导致转换不流畅。往下滑似乎不成问题，但当它往上滑时，真的很刺耳，一点也不流利！。如果我设置

max height:10rem

它不会使它变得更好。我希望有人能帮我解决这个问题，也许能教我更多关于vue转换和js与css转换的知识

编辑：
为了澄清，转换本身应该仅由css完成。手风琴的开口是用js，这很好。另外，如果能看到本机vue转换组件的转换使用示例，也会很好

编辑2:
这是一个代码沙盒，它与我的问题相同。

---

另一个更新 为了实现JS转换，您可以看一看来学习。无论如何，我不打算实现奇特的计时机制，但以最简单的形式，react中的JS崩溃转换将如下所示，我将其包括在现有的中：

这里不是高度，而是相对于y轴缩放。它还有一个副作用，即首先将容器扩展到全尺寸，然后再更新（缩放）内容

Vue v3.x

-leave

和

-enter中的类重命名为
-leave from
和
-enter from
。看看这个

Vue v2.x
问题是您正在将
max height
指定为100%，请使用一些大于预期最大高度的值。将您的样式更新为：

.slide-down-enter-active,
.slide-down-leave-active {
  transition: max-height 0.5s ease-in-out;
}

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

.slide-down-enter,
.slide-down-leave-to {
  overflow: hidden;
  max-height: 0;
}

它应该会起作用。看看这个演示。
那么，您只是在寻找一个仅限于CSS的下拉列表。平滑过渡？@GarthBaker不只是一个常规的下拉列表，其中过渡是一个仅使用css的平滑过渡。好的，我可以将高度设置为“自动”吗？因为我不想设置一个固定的高度。@Ezrab_uu您可以，但它不起作用，因为它需要一些高度值。为什么没有一个可滚动的固定高度容器呢？因为它不应该是可滚动的。从示例中也可以看出，它仍然不平滑。（我已经实现了你给我的解决方案）@Ezrab_uu更新了我的答案，诀窍是使用“最大高度”作为具体值，该值将超过预期的最大高度。当然，这只是增加和减少元素样式，并提高更新速度，你可以使用较小的值，减少使用较大的值。稍后我将查看并更新codesandbox。
.scale-enter-active,
.scale-leave-active {
  transform-origin: top;
  transition: transform 0.3s ease-in-out;
}

.scale-enter-to,
.scale-leave-from {
  transform: scaleY(1);
}

.scale-enter-from,
.scale-leave-to {
  transform: scaleY(0);
}

.slidedown-enter-active,
.slidedown-leave-active {
  transition: max-height 0.5s ease-in-out;
}

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

.slidedown-enter-from,
.slidedown-leave-to {
  overflow: hidden;
  max-height: 0;
}

.slide-down-enter-active,
.slide-down-leave-active {
  transition: max-height 0.5s ease-in-out;
}

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

.slide-down-enter,
.slide-down-leave-to {
  overflow: hidden;
  max-height: 0;
}