VueJS过渡“进入”不起作用

Posted 2023-02-22

【中文标题】VueJS过渡“进入”不起作用

【英文标题】：VueJS transition "enter" not working

【发布时间】：2017-05-02 18:53:37

【问题描述】：

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

<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 类。

有什么建议可以解决这个问题，或者为可折叠菜单设置动画的替代方法？

【参考方案1】：

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

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

这里是使用min-height的小提琴：jsfiddle

虽然max-height 不起作用：jsfiddle

【讨论】：

感谢您的回复，但您知道为什么max-height 不起作用吗？我有一个动态大小的盒子，所以我不能使用高度或最小高度。

@TPatrick CSS 中的 max-height 属性用于设置指定元素的最大高度，因此如果元素可以适应较小的高度，则不一定要更改高度。您是否在该 div 上使用其他与高度相关的属性？

不，没有指定高度，所以默认为“自动”。通过 max-height 制作动画似乎是相当 well established method 来完成这种动画的。

分叉你原来的jsfiddle，你可以看到max-height working with just normal CSS transitions

【参考方案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 帮助我！

【讨论】：

我遇到了类似的问题，添加 !important 也为我解决了这个问题。但是，每次转换都必须使用!important 强制我的样式不是一个好的解决方案。我的问题最终是我在样式的开头声明了过渡样式（为了方便构建它）。在将过渡样式移动到我的样式的末尾，从而使它们级联覆盖基本样式之后，一切都按预期工作。检查样式的顺序以及选择器的特殊性。参考：vanseodesign.com/css/css-specificity-inheritance-cascaade

我学会了避免在 css 上使用 !important 的艰难方法

【参考方案3】：

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

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

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