Transition of height resizing not working

Question

I have a div class called innerMenu and I want it to transition to a bigger height when moused over. Part of my code works, where it can be observed in the following jsfiddle:

https://jsfiddle.net/6ko9mc1u/1/

However despite adding all the transition options. The transition effect fails to happens for this class of div.

I have spent several hours trying to fix it, disabling several parts of the code, but I cannot make it work.

score 0 · Answer 1 · answered Jan 16 '17 at 22:57

0

.innerMenu does not have an explicit initial height defined, so it has an value of auto, but you cannot transition or animate auto values.

answered Jan 16 '17 at 22:57

Dai

141,631
28
261
374

oh my goodness. It was that simple. Thank you very much. My update jsfiddle now works https://jsfiddle.net/6ko9mc1u/2/ – Ren Jan 16 '17 at 22:58

score 0 · Answer 2 · answered Jan 16 '17 at 22:58

You need to set an explicit height on your .innerMenu element, as transitions require an actual value (i.e. non-auto or default) to be applied :

.innerMenu {
  /* Example of initial height */
  height: 10px;
  border: thin solid green;
}

As a note, you may also want to consider adding a transition to the element as well to ensure that the animation is applied when the element is hovered on and off.

Example

.menu {
  width: 150px;
  height: 200px;
  border: thin solid red;
}
.innerMenu {
  height: 10px;
  border: thin solid green;
  transition: 2s;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -o-transition: 2s;
  -ms-transition: 2s;
}
div.menu:hover {
  width: 300px;
  transition: 2s;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -o-transition: 2s;
  -ms-transition: 2s;
}
div.innerMenu:hover {
  height: 60px;
  transition: 2s;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -o-transition: 2s;
  -ms-transition: 2s;
}

<div class="menu">
  <div class="innerMenu"></div>
  <div class="innerMenu"></div>
</div>

Transition of height resizing not working

2 Answers2