So what can we do? How about CSS Transforms? We'll set scaleY to zero and then set it to one when it should be expanded. Sure, auto does eventually compute to a numeric value, but that message doesn't seem to get to transition, so it just pops right open instead of doing a nice animation. This would make everything so much easier, but sadly transitions only work on numeric values. See the Pen & amp amp amp amp amp amp amp amp lt a href=& amp amp amp amp quot amp amp amp amp amp quot & amp amp amp amp amp amp amp amp gt Pure CSS Slide Down Animation 1& amp amp amp amp amp amp amp amp lt /a& amp amp amp amp amp amp amp amp gt by Joe Zim (& amp amp amp amp amp amp amp amp lt a on & amp amp amp amp amp amp amp amp lt a href=& amp amp amp amp quot amp amp amp amp amp quot & amp amp amp amp amp amp amp amp gt CodePen& amp amp amp amp amp amp amp amp lt /a& amp amp amp amp amp amp amp amp gt. In this case, the seemingly obvious solutions is to just set the height to auto in the expanded version's styles. This is especially true on a responsive site, where the height can change depending on screen size.
This works perfectly if you know the height of the element, but what if you don't know the height? We'll need a generic animation that will work no matter what height the element is. Note that it works perfectly! Problem solved right? Yes and no. You'll need to go back in the frame's history or press "Rerun" to toggle them off. Note: This is using :target and links to activate the animations, so the lnks aren't toggles. See the Pen & amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp lt a href=& amp amp amp amp quot amp amp amp amp amp quot & amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp gt Pure CSS Slide Down Animation 0& amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp lt /a& amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp gt by Joe Zim (& amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp lt a on & amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp lt a href=& amp amp amp amp quot amp amp amp amp amp quot & amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp gt CodePen& amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp lt /a& amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp amp gt. If you simply go by what I said earlier, you'd just set the height to 0, and then to expand it, set the height to the number that shows the whole element (with a transition as well this is assumed for all of them, otherwise it won't be an animation). Let's take a look at some quick ideas of how you might expect to be able to do this easily. That shouldn't be too hard, right? How You Might Try to Do It This function will take a hidden element and make it visible by increasing the element's height from 0 to whatever the height of the element should be. If you're not sure what I mean by a "slide-down animation," check out the slideDown method from jQuery. What could be so hard about that, right? What Are We Talking About? The case we'll be checking out today is creating a slide-down animation using purely CSS. Sometimes something seems like it should be really easy, but it turns out to be extremely difficult.
0 kommentar(er)
