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.
CSS Transition Height
-
12-06-2023 - |
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.
Solution
OTHER TIPS
Instead of transition: all, ...
, use transition: left, ...
. This way, you only animate the left property. Changes to other properties are applied instantly.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow