From the course: Learning App Building with Vanilla JavaScript

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Transition element appearance using CSS

Transition element appearance using CSS - JavaScript Tutorial

From the course: Learning App Building with Vanilla JavaScript

Start my 1-month free trial

Transition element appearance using CSS

- [Narrator] Our current code recreates a jQuery show/hide toggle, but looking at the original jQuery statement, it was using the slide down method to make the element appear from top to bottom over 300 milliseconds, which is 3/10ths of a second. Fortunately it's possible to recreate this behavior without jQuery as well, and to do that we can use a CSS transition. So, in our CSS file, here on line 232, we have the style rule for dot results, and following that is the style rule for dot open, which is the class applied when the empty element is populated and which causes it to be displayed in the browser window. Now, to create a top to bottom animation, we can't use the display property, so I'll comment out that declaration here, in the results style rule. And here in the open style rule. Now, here in results, we're going to start by setting height to auto, and max height to zero, and overflow y to hidden. We're going to be transitioning the max height property so the overflow y value…

Contents