4

I'm trying to add a CSS transition on the max-height property of an element, to make it look like it's opening and closing. It's working properly on the opening part, but when I try to close it, it just skips the transition.

I tried applying the "transition: max-height .5s ease-in" line to the element in its opened state as with the closed state, but it doesn't change a thing. I also tried transitioning the height property instead, but it doesn't change anything either.

Here's the demo, try with screen width below 992px: http://efficience4.com/laloupe/fiche-auteur.html (click on "lire la biographie")

Any ideas as to why it does this and how to fix it ? :)

Marine Le Borgne
  • 1,036
  • 2
  • 11
  • 39

2 Answers2

3

Thanks to @Steve Ventimiglia, i removed ease-in. I still had a problem of delay when closing the div because of the max-height property.
I resolved this with this answer : https://stackoverflow.com/a/27515933/7247523 Basically, putting a delay of -.1s on the closing transition, and of 0s to the opening one.
Example : 

#toggled{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s; 
}
Marine Le Borgne
  • 1,036
  • 2
  • 11
  • 39
0

Well, ease-in is causing that.

  • Slow transition in, ends abruptly = ease-in.
  • Begins abruptly, slow transition out = ease-out.

You may just want to use ease or ease-in-out.

Also, max-height should be a CSS property defined within the specified element.

Steven Ventimiglia
  • 886
  • 1
  • 11
  • 19
  • oh yes, silly me. Thank you ! I'm going with ease-in-out. Any idea why the "out" transition has a delay ? I haven't specified any.. – Marine Le Borgne May 22 '17 at 14:47