I want to add a slide down animation to the element when display being set to block, and a slide up when it's none or '', here's my actual js script:
<script>
function showQuick(element, icon) {
var style = element.style
if (style.display === '') {
style.display = 'block';
icon.style.color = '#00FFFF';
icon.style.filter = 'drop-shadow(0 0 0.35rem #00FFFF)';
} else if (style.display === 'none') {
style.display = 'block';
icon.style.color = '#00FFFF';
icon.style.filter = 'drop-shadow(0 0 0.35rem #00FFFF)';
} else {
style.display = 'none';
icon.style.color = '#D2042D';
icon.style.filter = 'drop-shadow(0 0 0.35rem #D2042D)';
};
};
</script>
just try this, it is simple
div {
position: absolute;
top: -20px;
transition: top 1s;
}<div>hello everyone!</div>now when you set style.top = "0px"; in your code, you will get a sliding effect