css - VueJS 转换 "enter"不工作

Question

我正在尝试做一个相当简单的可折叠菜单转换。我的元素看起来像:

<transition name="settings">
    <div v-show="!settingsCollapsed">
    </div>
</transition>

我的CSS看起来像

.settings-enter {
  max-height: 0px;
}
.settings-enter-active {
  max-height: 200px;
  transition: all 1s;
}
.settings-leave {
  max-height: 200px;
}
.settings-leave-active {
  max-height: 0;
  transition: all 1s;
}

我的菜单可以正确地向上滑动，但是当它向下滑动时它没有动画。在我看来，.settings-enter 永远不会被应用，它只是从隐藏状态直接变成了 .settings-enter-active 类。

关于如何解决此问题的任何建议，或动画可折叠菜单的替代方案？

Answer 1

不是原始问题的解决方案:

如果您使用的是 Vue3:v-enter/v-leave 类现在是 v-enter-from/v-leave-from

来源:https://v3.vuejs.org/guide/transitions-enterleave.html