CODEWITHSUNDEEP
cssvue.jstransition
T Patrick
T Patrick

Reputation: 415

VueJS transition "enter" not working

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?

Upvotes: 9

Views: 11224

Answers (3)

Wolle
Wolle

Reputation: 491

Not the solution for the original question:

If you are using Vue3: the v-enter/v-leave classes are now v-enter-from/v-leave-from

source: https://v3.vuejs.org/guide/transitions-enterleave.html

Upvotes: 23

T Patrick
T Patrick

Reputation: 415

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!

Upvotes: 4

Saurabh
Saurabh

Reputation: 73669

Try this fiddle: http://jsfiddle.net/25bqhk1h/

Instead of max-height, you can try with height or min-height.

Here is fiddle working with min-height: jsfiddle

While max-height does not work: jsfiddle

Upvotes: 0

Related Questions