VueJS 过渡“进入"不工作 [英] VueJS transition "enter" not working

问题描述

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

<div v-show="!settingsCollapsed">

我的 css 看起来像

.settings-enter {最大高度:0px；}.settings-enter-active {最大高度:200px；过渡:全1；}.settings-离开{最大高度:200px；}.settings-leave-active {最大高度:0；过渡:全1；}

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

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

解决方案

我终于想通了！秘诀是将 !important 添加到 enter 类:

.settings-controls {溢出:隐藏；高度:100%；最大高度:999px；过渡:全1；}.settings-输入{最大高度:1px！重要；不透明度:0 ！重要；}.settings-enter-active {最大高度:999px；不透明度:1；过渡:全1；}

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

非常感谢@saurabh 帮助我！

I'm trying to do a fairly simple collapsable menu transition. My element looks like:

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

And my css looks like

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

My menu slides up correctly, but when it's sliding down it does not animate. It appears to me like .settings-enter never gets applied, and it just goes straight from being hidden to having the class .settings-enter-active.

Any suggestions how to fix this, or alternatives for animating a collapsable menu?

解决方案

I finally figured it out! The secret was to add !important to the 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;
}

I'm not entirely sure why this works because I'm fairly confident that the transition class should have overwritten the base class styles, so if anyone can explain why this works I'd appreciate it.

Much thanks to @saurabh for helping me out!

这篇关于VueJS 过渡“进入"不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！