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 从来没有被应用过，它只是从隐藏直接变成了 class .settings-enter-active。

有任何解决此问题的建议，或动画可折叠菜单的替代方法吗？

Answer 1

试试这个 fiddle：http://jsfiddle.net/25bqhk1h/

而不是 max-height，您可以尝试使用 height 或 min-height。

这里是 fiddle 与 min-height 的合作：jsfiddle

虽然 max-height 不起作用：jsfiddle

Answer 2

我终于明白了！秘诀是将 !important 添加到 enter class:

.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;
}

我不完全确定为什么会这样，因为我相当有信心转换 class 应该已经覆盖了基础 class 样式，所以如果有人能解释为什么这样行得通，我'非常感谢。

非常感谢@saurabh 帮助我！

Answer 3

不是原问题的答案：

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

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

VueJS 转换 "enter" 不工作

VueJS transition "enter" not working

css

transitions

vue.js