I need to make a transition on a field between three different states. This field has always same height size on the initial state, on click this field should grow its height to an automatic size (according with the height of the new content).. Everything sims to work at this point, but the issue comes because on mouseleave the element should change its height to a new height according the new content. Everything happens on the same field (div), is the content the one who changes its size.
So... I have one field.. three different states and I need transition between those states:
- First state: height size fixed (always the same)
- Second state: height size auto... according the new content (appears on click)
- Third stat: height size auto... according the new content (appears on mouseleave)
I've read that you can replace height auto with max-height transitions but... in this is not working, since the third transition (on mouseleave) should go back to a new height size.
What can I do? Should I think only on css to resolve this..? maybe I will need some jquery or js?
