How to Remove Delay on Css3 Slide out transition which uses max-height transition

Question

I\'m having an issue with a transition I\'m using to slide a panel in and out.

Please take a look at the following jsbin http://jsbin.com/uvejuj/1/

Notice that

Answer 1

Fixed JS Bin

Fix delay solution:

Put cubic-bezier(0, 1, 0, 1) transition function for element.

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
}