VueJS 转换“输入”不起作用

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

Answer 2

我终于弄明白了！秘密是添加!important到类中enter：

.settings-controls {
  overflow: hidden;
  height: 100%;
  max-height: 999px;
  transition: all 1s;
}
.settings-enter {
  max-height: 1px !important;
  opacity: 0 !important;
}
.settings-enter-active {
  max-height: 999px;
  opacity: 1;
  transition: all 1s;
}

我不完全确定为什么它会起作用，因为我相当有信心过渡类应该覆盖基类样式，所以如果有人能解释为什么它会起作用，我将不胜感激。

非常感谢@saurabh 帮助我！