CSS Transition Height

Question

I've built a responsive nav that is revealed when a button is clicked. This uses a translate to move the shim div to the left. The shim div is also being resized (using JS) accordingly to browser height by setting the min-height property. When the page loads the shim height is animated. I believe it's because I'm using: transition: all, x, x.

I'd like to animate the shim opening without animating the height.

Try refreshing the page a few times to see the height being animated.

Demo: http://codepen.io/anon/pen/gCoqI

Answer 1

You could just set min-height to 100% on .shim in the CSS. That way it doesn't change height and therefore doesn't animate (and requires less JS). Also changing the animation property from all to left should also work.

Answer 2

Instead of transition: all, ..., use transition: left, .... This way, you only animate the left property. Changes to other properties are applied instantly.