You can recreate gradual animations using the CSS transition property. In this video, add a transition to the CSS code to recreate the effect of the jQuery slideDown method.
- [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 ensures that…any extra content isn't displayed…
- Replacing jQuery Ajax requests with Fetch requests
- Implementing data binding
- Replacing simple animations
- Ensuring backwards compatibility