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?

score 19 · Answer 1 · answered Sep 10 '20 at 11:30

19

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

answered Sep 10 '20 at 11:30

Wolle

421
5
8

This is the solution for me – rodrigo Jun 09 '23 at 14:55

score 4 · Accepted Answer · answered Dec 20 '16 at 15:46

4

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!

answered Dec 20 '16 at 15:46

T Patrick

393
4
16

I had a similar issue and adding `!important` fixed the issue for me as well. However, it's not a good solution to have to force my styles with `!important` for every transition. My problem ended up being that I declared the transition styles at the beginning of my styles (for convenience while building it out). After moving the transition styles to end of my styles, thereby having them *cascade* over the base styles, everything works as expected. Check the order of your styles and also the specificity of your selectors. Ref: https://vanseodesign.com/css/css-specificity-inheritance-cascaade/ – phip Mar 16 '21 at 19:22
I learned the hard way to avoid using `!important` on css – Lenon Tolfo Jun 03 '21 at 10:23

Saurabh · Answer 3 · 2016-12-17T04:49:21.220

0

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

edited Dec 17 '16 at 04:49

answered Dec 17 '16 at 03:31

Saurabh

71,488
40
181
244

Thanks for your reply, but do you have any idea why `max-height` isn't working? I have a dynamically sized box, so I can't use height or min-height. – T Patrick Dec 17 '16 at 14:32
@TPatrick The max-height property in CSS is used to set the maximum height of a specified element, so it not necessarily change the height if elements can be fit in lesser height. are you using other height related properties on that div? – Saurabh Dec 17 '16 at 14:35
Nope, no height specified so it's "auto" by default. Animating by max-height seems to be a fairly [well established method](http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) for accomplishing this kind of animation. – T Patrick Dec 17 '16 at 17:45
@TPatrick Can you put more of your HTML in the question or better if you can create a jsfiddle reproducing this scenario. – Saurabh Dec 18 '16 at 00:22
Forking off your original jsfiddle, you can see max-height [working with just normal CSS transitions](https://jsfiddle.net/theronp/woh19jt5/) – T Patrick Dec 19 '16 at 19:46

VueJS transition "enter" not working

3 Answers3

Linked