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

我终于明白了！秘诀是将2018添加到=INT((B4-DATE(YEAR(B4-WEEKDAY(B4-1)+4),1,3)+WEEKDAY(DATE(YEAR(B4-WEEKDAY(B4-1)+4),1,3))+5)/7)类：

!important

我不完全确定为什么会这样，因为我相信过渡类应该覆盖基类样式，所以如果有人能够解释为什么这样可行，我会很感激。

非常感谢@saurabh帮助我！

Answer 3

试试这个小提琴：http://jsfiddle.net/25bqhk1h/

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

以下是使用min-height：jsfiddle

的小提琴

虽然max-height不起作用，但jsfiddle

VueJS过渡“进入”不起作用

3 个答案: