VueJS transition "enter" not working

Question

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?

Answer 1

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!