0

I have code on an element for transition:

#zlatest .zreader-toggle-fetch-inner {
  -webkit-transition: all 3s ease-in-out;
  -moz-transition: all 3s ease-in-out;
  -o-transition: all 3s ease-in-out;
  transition: all 3s ease-in-out;
}

This matches one element. On this element I switch between these classes and hoped to see a smooth transition, but the change is immediate:

.zReader-requested {
    height: 50px;
}
.zreader-received {
    height: auto;
}

What am I doing wrong here?

Gumbo
  • 643,351
  • 109
  • 780
  • 844
Leo
  • 4,136
  • 6
  • 48
  • 72
  • Use max-height instead of height. – newTag Feb 13 '14 at 20:16
  • There was a link to another answer. This was removed which was unexpected for me. Unfortunately that mean I have lost it. So here is a question again - which might have been answered there, I do not know. Why does max-height work instead? – Leo Feb 13 '14 at 21:10
  • You can't transition to a implicit height value – Foreign Object Feb 14 '14 at 00:04
  • Ah, now I see that @NiettheDarkAbsol has a link to the same solution that was removed. Thanks. And I believe I understand what you said now, c-misura. Thanks. – Leo Feb 14 '14 at 06:32

1 Answers1

0

You haven't implemented transition yet. What you have done was switching the classes of elements, so the effect took place immediately.

What you need to do is to start the animation when something happens, not just switching classes.

Toan Nguyen
  • 11,263
  • 5
  • 43
  • 59