1

I'm trying to create a CSS3 sliding animation. The slideDown part works, but the going up part doesn't seem to trigger instantly and I can't figure out why.

   .slideUp{
        -webkit-animation:slideUpFrames 1s;
        -webkit-animation-fill-mode: forwards;
    }

    @-webkit-keyframes slideUpFrames{
      0%{
        max-height:1000px;
      }

      100%{
        max-height:0px;
      }
    }

    .slideDown{
          -webkit-animation:slideDownFrames 1s;
          -webkit-animation-fill-mode: forwards;
    }

    .slidable{
        overflow: hidden;
    }

    @-webkit-keyframes slideDownFrames{
      0%{
        max-height: 0px;
      }

      100%{
        max-height:1000px;
      }
    }

I've created a fiddle (webkit only): http://jsfiddle.net/5E7YQ/

How could I fix this?

user1613512
  • 3,590
  • 8
  • 28
  • 32

1 Answers1

1

The slideUp animation is triggering immediately you just can't see the first 940px of the animation, because your <ul class="slidable"> is only 60px tall.

enter image description here

So now that we know what's going on here's how it can be fixed:

Working Example

.slideUp {
    -webkit-animation:slideUpFrames .5s; /* shorten time */
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes slideUpFrames {
    0% {
        max-height:60px; /* change 1000px to the height of the element */
    }
    100% {
        max-height:0px;
    }
}
.slideDown {
    -webkit-animation:slideDownFrames .5s; /* shorten time */
    -webkit-animation-fill-mode: forwards;
}
.slidable {
    overflow: hidden;
}
@-webkit-keyframes slideDownFrames {
    0% {
        max-height: 0px;
    }
    100% {
        max-height:60px; /* change 1000px to the height of the element */
    }
}

Or if you would like you can shorten the whole thing and use .slideUp(); and .slideDown();

Working Example 2

apaul
  • 16,092
  • 8
  • 47
  • 82
  • Thanks for the answer, the only problem this brings is that I don't know how many li elements there will be in the ul so I don't know the exact height at compile time. Will using jQuery decrease the performance? CSS3 is better at stuff like this right? – user1613512 Jul 07 '14 at 06:08
  • @user1613512 Generally css animations tend to be a little smoother, but they still have support issues. If you're already using jQuery for the buttons using slideUp/slideDown shouldn't be a problem. – apaul Jul 07 '14 at 15:54
  • @user1613512 If you know the height of your li elements, but not how many li elements, you could attach the animation to the li's rather than the ul like this: http://jsfiddle.net/5E7YQ/6/ – apaul Jul 07 '14 at 15:56