JS中改变元素样式时如何添加animation？

Question

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>

Answer 1

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